https://ntds-alfa-202101.vercel.app/_next/static/chunks/pages/comp…/button/tertiary-button-0028b75296d2ed0b.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6272],{26345:function(t,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/button/tertiary-button",function(){return n(63016)}])},63016:function(t,e,n){"use strict";n.r(e);n(67294);var o=n(3905),a=n(38409),s=n(23673);function r(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 u={};function i(t){var e=t.components,n=r(t,["components"]);return(0,o.mdx)("wrapper",Object.assign({},u,n,{components:e,mdxType:"MDXLayout"}),(0,o.mdx)("blockquote",null,(0,o.mdx)("p",{parentName:"blockquote"},"Every sidekick also needs a lesser sidekick, therefore ",(0,o.mdx)("strong",null,"SecondaryButton")," has also been granted one. Denotes tertiary\nactions in context of ",(0,o.mdx)("strong",null,"SecondaryButton"),".")),(0,o.mdx)("h2",null,"Basic usage"),(0,o.mdx)("pre",null,(0,o.mdx)("code",Object.assign({parentName:"pre"},{className:"language-tsx",metastring:"live controls",live:!0,controls:!0}),"// import TertiaryButton from '../TertiaryButton'; // '../..' -> '@ntds/button'\n\nfunction Example() {\n  return <div className='space-x-4'>\n      <TertiaryButton onClick={() => alert('Hello!')}>\n        Normal\n      </TertiaryButton>\n      <TertiaryButton noPill onClick={() => alert('(hello!)')}>\n        Rounded Square\n      </TertiaryButton>\n      <TertiaryButton disabled onClick={() => alert('You will not see me! \ud83d\udc7b')}>\n        Deactivated\n      </TertiaryButton>\n    </div>;\n}\n")),(0,o.mdx)("h2",null,"How does it differ from ",(0,o.mdx)("inlineCode",{parentName:"h2"},"<Button>"),"?"),(0,o.mdx)("p",null,"The main difference is that this button doesn't lend itself to be overridden with the ",(0,o.mdx)("inlineCode",{parentName:"p"},"tw"),'-prop and its styling\nare considered final. This is important because we want our users to consistently recognize the intention behind\nthis button across multiple uses cases (e.g. "clicking this button will resolve the current actionable").'))}i.isMDXComponent=!0;var l=n(66836),c={accessibility:{title:"Accessibility",slug:"/components/button/tertiary-button/accessibility"},index:{title:"Preview",slug:"/components/button/tertiary-button"},dev:{title:"Dev",slug:"/components/button/tertiary-button/dev"}};e.default=function(t){return(0,o.mdx)(a.Z,{title:"TertiaryButton",info:{entityName:"TertiaryButton",entityDisplayName:"TertiaryButton",entityPath:"/vercel/path0/node_modules/@ntds/button/src/TertiaryButton",version:"4.1.2",displayName:"TertiaryButton",packageDisplayName:"Button",file:"/vercel/path0/node_modules/@ntds/button/src/TertiaryButton/TertiaryButton.js",relativePath:"button/src/TertiaryButton",packageName:"button",componentSubPath:"/vercel/path0/pages/components/button/tertiary-button",packagePath:"/vercel/path0/pages/components/button",slug:"/components/button/tertiary-button",mdFiles:{accessibility:"/vercel/path0/node_modules/@ntds/button/src/TertiaryButton/Accessibility.md",index:"/vercel/path0/node_modules/@ntds/button/src/TertiaryButton/Guide.md",dev:"/vercel/path0/node_modules/@ntds/button/src/TertiaryButton/Readme.md"},mainMdFile:"/vercel/path0/node_modules/@ntds/button/src/TertiaryButton/Guide.md",docFile:"/vercel/path0/node_modules/@ntds/button/src/TertiaryButton/TertiaryButton.doc.json",slugMap:{accessibility:{title:"Accessibility",slug:"/components/button/tertiary-button/accessibility"},index:{title:"Preview",slug:"/components/button/tertiary-button"},dev:{title:"Dev",slug:"/components/button/tertiary-button/dev"}},hasSubPages:!0,type:"component"},reactDocs:l,menuMap:c},(0,o.mdx)("h1",{className:"main"},"TertiaryButton"),(0,o.mdx)(i,Object.assign({},t)),(0,o.mdx)(s.Z,{version:"4.1.2"}))}},66836:function(t){"use strict";t.exports=JSON.parse('{"slug":"tertiary-button","name":"TertiaryButton","srcFile":"components/button/src/TertiaryButton/TertiaryButton.tsx","docs":{"tags":{},"filePath":"/home/runner/work/ntds/ntds/packages/components/button/src/TertiaryButton/TertiaryButton.tsx","description":"","displayName":"TertiaryButton","methods":[],"props":{"variant":{"defaultValue":{"value":"blue"},"description":"<p>Color variant for button\\nvariants: \'blue\' | \'haiti\'\\nDefault: \'blue\'</p>\\n","name":"variant","parent":{"fileName":"button/src/TertiaryButton/TertiaryButton.tsx","name":"TertiaryButtonProps"},"declarations":[{"fileName":"button/src/TertiaryButton/TertiaryButton.tsx","name":"TertiaryButtonProps"}],"required":false,"type":{"name":"\\"blue\\" | \\"haiti\\""}},"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":null,"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>"}},"fluid":{"defaultValue":null,"description":"<p>Makes the button fill the parents available space</p>\\n","name":"fluid","parent":{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"},"declarations":[{"fileName":"button/src/Button/Button.tsx","name":"BaseButtonProps"}],"required":false,"type":{"name":"boolean"}},"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, \\"elementRef\\" | \\"render\\" | \\"type\\" | \\"iconRight\\" | \\"iconLeft\\" | \\"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":null,"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=26345,t(t.s=e);var e}));var e=t.O();_N_E=e}]);