https://ntds-alfa-202101.vercel.app/_next/static/chunks/pages/comp…/accessibility-4b7affaf88d0e23b.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2620],{8774:function(t,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/button/square-button/accessibility",function(){return n(85898)}])},85898:function(t,e,n){"use strict";n.r(e);n(67294);var o=n(3905),a=n(38409),s=n(23673);function u(t,e){if(null==t)return{};var n,o,a=function(t,e){if(null==t)return{};var n,o,a={},s=Object.keys(t);for(o=0;o<s.length;o++)n=s[o],e.indexOf(n)>=0||(a[n]=t[n]);return a}(t,e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);for(o=0;o<s.length;o++)n=s[o],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(a[n]=t[n])}return a}var r={};function i(t){var e=t.components,n=u(t,["components"]);return(0,o.mdx)("wrapper",Object.assign({},r,n,{components:e,mdxType:"MDXLayout"}),(0,o.mdx)("p",null,"Please see the ",(0,o.mdx)("strong",{parentName:"p"},(0,o.mdx)("a",Object.assign({parentName:"strong"},{href:"/components/button/accessibility"}),"accessibility documentation for the button-package")),"."))}i.isMDXComponent=!0;var l=n(13429),c={accessibility:{title:"Accessibility",slug:"/components/button/square-button/accessibility"},index:{title:"Preview",slug:"/components/button/square-button"},dev:{title:"Dev",slug:"/components/button/square-button/dev"}};e.default=function(t){return(0,o.mdx)(a.Z,{title:"Accessibility",info:{entityName:"SquareButton",entityDisplayName:"SquareButton",entityPath:"/vercel/path0/node_modules/@ntds/button/src/SquareButton",version:"4.1.2",displayName:"Accessibility",packageDisplayName:"Button",file:"/vercel/path0/node_modules/@ntds/button/src/SquareButton/SquareButton.js",relativePath:"button/src/SquareButton",packageName:"button",componentSubPath:"/vercel/path0/pages/components/button/square-button",packagePath:"/vercel/path0/pages/components/button",slug:"/components/button/square-button/accessibility",mdFiles:{accessibility:"/vercel/path0/node_modules/@ntds/button/src/SquareButton/Accessibility.md",index:"/vercel/path0/node_modules/@ntds/button/src/SquareButton/Guide.md",dev:"/vercel/path0/node_modules/@ntds/button/src/SquareButton/Readme.md"},mainMdFile:"/vercel/path0/node_modules/@ntds/button/src/SquareButton/Accessibility.md",docFile:"/vercel/path0/node_modules/@ntds/button/src/SquareButton/SquareButton.doc.json",slugMap:{accessibility:{title:"Accessibility",slug:"/components/button/square-button/accessibility"},index:{title:"Preview",slug:"/components/button/square-button"},dev:{title:"Dev",slug:"/components/button/square-button/dev"}},hasSubPages:!0,type:"packagePage"},reactDocs:l,menuMap:c},(0,o.mdx)("h1",{className:"main"},"Accessibility"),(0,o.mdx)(i,Object.assign({},t)),(0,o.mdx)(s.Z,{version:"4.1.2"}))}},13429:function(t){"use strict";t.exports=JSON.parse('{"slug":"square-button","name":"SquareButton","srcFile":"components/button/src/SquareButton/SquareButton.tsx","docs":{"tags":{},"filePath":"/home/runner/work/ntds/ntds/packages/components/button/src/SquareButton/SquareButton.tsx","description":"","displayName":"SquareButton","methods":[],"props":{"id":{"defaultValue":null,"description":"<p>Standard HTML-element id</p>\\n","name":"id","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"string"}},"title":{"defaultValue":null,"description":"<p>Standard HTML-title attribute</p>\\n","name":"title","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"string"}},"tabIndex":{"defaultValue":null,"description":"<p>Standard HTML-tabIndex\\n<code>-1</code> = not focusable\\n<code>0</code> = focusable, natural order</p>\\n","name":"tabIndex","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"0 | -1"}},"type":{"defaultValue":null,"description":"<p>Default behavior of the standard HTML-button.</p>\\n<p>Note: Will be omitted when using the <code>render-prop</code>.</p>\\n","name":"type","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"\\"button\\" | \\"submit\\" | \\"reset\\""}},"noPill":{"defaultValue":{"value":"true"},"description":"<p>Shape of button will be a square with rounded corners instead of a pill</p>\\n","name":"noPill","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"<p>Disables the button both visually and interactively</p>\\n","name":"disabled","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"boolean"}},"onClick":{"defaultValue":null,"description":"<p>Standard click event</p>\\n","name":"onClick","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"MouseEventHandler<HTMLElement>"}},"grouped":{"defaultValue":null,"description":"<p>Optimize the button to be displayed in a group/cluster\\nwith other buttons.</p>\\n<ul>\\n<li>Sets the font-weight to medium (instead of bold)</li>\\n<li><code>fluid</code> defaults to true</li>\\n</ul>\\n","name":"grouped","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"boolean"}},"render":{"defaultValue":null,"description":"<p>Hook into the top render method of the wrapping element</p>\\n","name":"render","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"(props: Omit<BaseButtonProps, \\"type\\" | \\"render\\" | \\"elementRef\\" | \\"iconLeft\\" | \\"iconRight\\" | \\"iconClassName\\">) => Element"}},"elementRef":{"defaultValue":null,"description":"<p>Get the DOM-reference from the button-element</p>\\n","name":"elementRef","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"Ref<HTMLButtonElement>"}},"iconLeft":{"defaultValue":null,"description":"<p>Icon to be displayed on the LEFT side of the content</p>\\n<p>Note: Use IconButton when the button has no other content</p>\\n","name":"iconLeft","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"React.ComponentType<IconProps>"}},"iconRight":{"defaultValue":null,"description":"<p>Icon to be displayed on the RIGHT side of the content</p>\\n<p>Note: Use IconButton when the button has no other content</p>\\n","name":"iconRight","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"React.ComponentType<IconProps>"}},"iconSpaceBetween":{"defaultValue":null,"description":"<p>Place the content and the icon at the start and end\\nof the button by (justify-between)</p>\\n<p>Example:</p>\\n<pre><code>iconSpaceBetween=false (default)\\n[   Content \ud83d\udc4b  ]\\n\\niconSpaceBetween=true\\n[Content      \ud83d\udc4b]\\n</code></pre>\\n","name":"iconSpaceBetween","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"boolean"}},"busy":{"defaultValue":null,"description":"<p>Sets the button in a busy/working mode that prevents clicks\\n(via disable) and activates visual cues like changing the\\ncursor and deactivates the hover-effect.</p>\\n","name":"busy","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"boolean"}},"busyLabel":{"defaultValue":null,"description":"<p>Add a visible label alongside the busy spinner</p>\\n","name":"busyLabel","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"string"}},"busyShowLabel":{"defaultValue":null,"description":"<p>Whether or not to show the label alongside the busy spinner or\\njust announce it to the screen reader</p>\\n","name":"busyShowLabel","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"boolean"}},"tw":{"defaultValue":null,"description":"<p>Tailwind overrides</p>\\n","name":"tw","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"TwGroupKeys"}},"size":{"defaultValue":{"value":"ButtonSize.Medium"},"description":"<p>Changes the appearance of the button including spacing and text. There are four sizes:</p>\\n<ul>\\n<li>Small (<code>sm</code>)</li>\\n<li>Medium (<code>md</code>) (the default)</li>\\n<li>Responsive (<code>responsive</code>)</li>\\n<li>Large (<code>lg</code>)</li>\\n</ul>\\n<p>The <code>responsive</code> size will be the same as the medium/base (<code>md</code>) button\\non smaller screens and the large (<code>lg</code>) button on bigger screens.</p>\\n","name":"size","parent":{"fileName":"button/src/Button/Button.tsx","name":"ButtonWithIconProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"ButtonWithIconProps"}],"required":false,"type":{"name":"ButtonSizes"}},"children":{"defaultValue":null,"description":"<p>Any valid ReactNode(s)</p>\\n","name":"children","parent":{"fileName":"button/src/Button/Button.tsx","name":"ButtonWithIconProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"ButtonWithIconProps"}],"required":false,"type":{"name":"ReactNode"}}}}}')}},function(t){t.O(0,[5681,9517,2358,9353,5689,4803,9774,2888,179],(function(){return e=8774,t(t.s=e);var e}));var e=t.O();_N_E=e}]);