var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var A=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),u=(n,l)=>{for(var a in l)c(n,a,{get:l[a],enumerable:!0})},t=(n,l,a,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of p(l))!m.call(n,s)&&s!==a&&c(n,s,{get:()=>l[s],enumerable:!(r=B(l,s))||r.enumerable});return n};var F=(n,l,a)=>(a=n!=null?h(y(n)):{},t(l||!n||!n.__esModule?c(a,"default",{value:n,enumerable:!0}):a,n)),g=n=>t(c({},"__esModule",{value:!0}),n);var d=A((D,o)=>{o.exports=_jsx_runtime});var E={};u(E,{default:()=>f,frontmatter:()=>b});var e=F(d()),b={title:"Code",date:new Date(17032032e5)};function i(n){let l=Object.assign({h2:"h2",a:"a",span:"span",div:"div",pre:"pre",code:"code",p:"p"},n.components),{Story:a}=l;return a||C("Story",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(l.h2,{id:"basic",children:[(0,e.jsx)(l.a,{className:"anchor",href:"#basic",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Basic"]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"one-dark-pro",style:{backgroundColor:"#282c34"},tabIndex:"0","data-language":"html","data-theme":"default",children:(0,e.jsx)(l.code,{"data-language":"html","data-theme":"default",style:{display:"grid"},children:(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">Button"})]})})})}),` `,(0,e.jsx)(a,{component:"button",id:"basic"}),` `,(0,e.jsxs)(l.h2,{id:"variants-and-ranks",children:[(0,e.jsx)(l.a,{className:"anchor",href:"#variants-and-ranks",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Variants and Ranks"]}),` `,(0,e.jsx)(l.p,{children:"Buttons can have different ranks and variants. The rank defines the visual importance of the button, while the variant defines the intent of the button."}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"one-dark-pro",style:{backgroundColor:"#282c34"},tabIndex:"0","data-language":"html","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"html","data-theme":"default",style:{display:"grid"},children:[(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:""})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-icon-credit-card"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"slot"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"lead"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Primary"})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:" "}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:""})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"rank"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"secondary"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-icon-credit-card"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"slot"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"lead"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Secondary"})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:" "}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:""})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"rank"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tertiary"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-icon-credit-card"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"slot"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"lead"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Tertiary"})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:""})]})]})})}),` `,(0,e.jsx)(a,{component:"button",id:"ranks-and-variants"}),` `,(0,e.jsxs)(l.h2,{id:"sizes",children:[(0,e.jsx)(l.a,{className:"anchor",href:"#sizes",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Sizes"]}),` `,(0,e.jsxs)(l.p,{children:["Buttons can be ",(0,e.jsx)("code",{children:"small"}),", ",(0,e.jsx)("code",{children:"medium"})," or ",(0,e.jsx)("code",{children:"large"}),". The default size is medium."]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"one-dark-pro",style:{backgroundColor:"#282c34"},tabIndex:"0","data-language":"html","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"html","data-theme":"default",style:{display:"grid"},children:[(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:""})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"small"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"> Small "})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:" "}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:""})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"> Medium "})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:" "}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:""})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"large"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"> Large "})]})]})})}),` `,(0,e.jsx)(a,{component:"button",id:"sizes"}),` `,(0,e.jsxs)(l.h2,{id:"lead-and-trail-icons",children:[(0,e.jsx)(l.a,{className:"anchor",href:"#lead-and-trail-icons",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Lead and Trail Icons"]}),` `,(0,e.jsxs)(l.p,{children:["Buttons can have an icon on the left or right side of the text. These are called leading or trailing icons, and are added by placing a gds-icon component in either the ",(0,e.jsx)("code",{children:"lead"})," or ",(0,e.jsx)("code",{children:"trail"})," slot."]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"one-dark-pro",style:{backgroundColor:"#282c34"},tabIndex:"0","data-language":"html","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"html","data-theme":"default",style:{display:"grid"},children:[(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:""})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-icon-credit-card"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"slot"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"lead"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Leading icon"})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:" "}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:""})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Trailing icon"})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-icon-credit-card"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"slot"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"trail"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:" "})]})})}),` `,(0,e.jsx)(a,{component:"button",id:"with-icon"}),` `,(0,e.jsxs)(l.h2,{id:"icon-button",children:[(0,e.jsx)(l.a,{className:"anchor",href:"#icon-button",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Icon Button"]}),` `,(0,e.jsx)(l.p,{children:"If a single gds-icon is the only child of a button, it will render as a circular icon button."}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"one-dark-pro",style:{backgroundColor:"#282c34"},tabIndex:"0","data-language":"html","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"html","data-theme":"default",style:{display:"grid"},children:[(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:""})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-icon-arrow-right"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]})]})})}),` `,(0,e.jsx)(a,{component:"button",id:"icon-button"}),` `,(0,e.jsxs)(l.h2,{id:"disabled",children:[(0,e.jsx)(l.a,{className:"anchor",href:"#disabled",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Disabled"]}),` `,(0,e.jsx)(l.p,{children:"The buttons support a disabled state, but in general, it should not be used. It can be hard for the user to understand why the button is disabled, so it is often better to keep the button clickable and then show an error message instead."}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"one-dark-pro",style:{backgroundColor:"#282c34"},tabIndex:"0","data-language":"html","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"html","data-theme":"default",style:{display:"grid"},children:[(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:""})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">Primary"})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:" "}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:""})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"rank"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"secondary"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"positive"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">Secondary"})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:" "}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:""})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"rank"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tertiary"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"> Tertiary "})]})]})})}),` `,(0,e.jsx)(a,{component:"button",id:"disabled"}),` `,(0,e.jsxs)(l.h2,{id:"link",children:[(0,e.jsx)(l.a,{className:"anchor",href:"#link",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Link"]}),` `,(0,e.jsx)(l.p,{children:"A link styled as a button. If a prop 'href' is passed to the button it uses the link variant styled as a button."}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"one-dark-pro",style:{backgroundColor:"#282c34"},tabIndex:"0","data-language":"html","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"html","data-theme":"default",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"https://seb.io"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Link"})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:""})]})]})})}),` `,(0,e.jsx)(a,{component:"button",id:"link"}),` `,(0,e.jsxs)(l.h2,{id:"length",children:[(0,e.jsx)(l.a,{className:"anchor",href:"#length",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Length"]}),` `,(0,e.jsx)(l.p,{children:"Text content will get truncated if it does not fit."}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"one-dark-pro",style:{backgroundColor:"#282c34"},tabIndex:"0","data-language":"html","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"html","data-theme":"default",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-flex"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"max-width"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"30ch"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-icon-credit-card"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"slot"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"lead"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" This is a long text that will truncated"})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:""})]})]})})}),` `,(0,e.jsx)(a,{component:"button",id:"length"}),` `,(0,e.jsxs)(l.h2,{id:"aria",children:[(0,e.jsx)(l.a,{className:"anchor",href:"#aria",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Aria"]}),` `,(0,e.jsx)(l.p,{children:"Some aria attributes are forwarded to the inner button element by default, but if you want to force a certain aria-attribute on the inner button, you can use the gds-aria-* attributes on the gds-button element."}),` `,(0,e.jsx)(l.p,{children:"Also note that label will render as aria-label on the inner button element."}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"one-dark-pro",style:{backgroundColor:"#282c34"},tabIndex:"0","data-language":"html","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"html","data-theme":"default",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"label"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"This is a button"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"aria-haspopup"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"dialog"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"aria-expanded"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"false"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"gds-aria-description"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"This is a description"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"","data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" Aria button"})}),` `,(0,e.jsxs)(l.span,{className:"","data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:""})]})]})})}),` `,(0,e.jsx)(a,{component:"button",id:"aria"})]})}function N(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(i,n)})):i(n)}var f=N;function C(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(E);})(); ;return Component;