@salesforce-ux/design-system/__internal/chunked/docs/ui/components/button-icons/docs.mdx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,n,l={1166:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return ee},getElement:function(){return Z}});var l=n(1594),s=n.n(l),o=n(5671),r=n(6547),a=n(3212),i=n(5619),d=n(1374),c=n(2436),m=n(9582),u=n(6955),b=n(9825),h=n(8347),p=[{id:"default",label:"Base – default",element:s().createElement(u.A,{assistiveText:"Settings",title:"Settings"})}],E=[{id:"error",label:"Base - Error",element:s().createElement(u.A,{feedback:"error",symbol:"error",title:"Error",assistiveText:"Error"})},{id:"warning",label:"Base - Warning",element:s().createElement(u.A,{feedback:"warning",symbol:"warning",title:"Warning",assistiveText:"Warning"})},{id:"bare-disabled",label:"Base - Disabled",element:s().createElement(u.A,{assistiveText:"Settings",disabled:!0,title:"Settings"})}],v=[{id:"hint-hover",label:"Base - Hint on hover",element:s().createElement(u.U,null,s().createElement(u.A,{assistiveText:"Settings",iconClassName:"slds-button__icon_hint",title:"Settings"}))},{id:"button-icon-lbc-mismatch",label:"Button Icon - LBC Mismatch",element:s().createElement(b.$n,{className:"slds-button_icon slds-button_icon-border"},s().createElement("span",{className:"slds-assistive-text"},"Error"),s().createElement(h.A,{sprite:"utility",symbol:"clock",className:"slds-button__icon slds-icon-text-error"}))}],y="background-color: #f4f6f9; padding: 0.5rem;",f=[{id:"default",label:"Bordered Filled – default",demoStyles:y,storybookStyles:!0,element:s().createElement(u.A,{assistiveText:"Search",symbol:"search",theme:"neutral",title:"Search"})}],g=[{id:"disabled",label:"Bordered Filled - Disabled",demoStyles:y,storybookStyles:!0,element:s().createElement(u.A,{assistiveText:"Search",disabled:!0,symbol:"search",theme:"neutral",title:"Search"})}],S=[{id:"with-dropdown",label:"Bordered Filled - With dropdown",demoStyles:y,storybookStyles:!0,element:s().createElement(u.A,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Bordered Filled - Hint on hover",demoStyles:y,storybookStyles:!0,element:s().createElement(u.U,null,s().createElement(u.A,{assistiveText:"More options",iconClassName:"slds-button__icon_hint",theme:"neutral",title:"More Options"}))}],_="background-color: #16325C; padding: 0.5rem;",A=[{id:"default",label:"Bordered Inverse – default",demoStyles:_,storybookStyles:!0,element:s().createElement(u.A,{assistiveText:"Search",size:"medium",symbol:"search",theme:"inverse",title:"Search"})}],O=[{id:"disabled",label:"Bordered Inverse – Disabled",demoStyles:_,storybookStyles:!0,element:s().createElement(u.A,{assistiveText:"Search",disabled:!0,size:"medium",symbol:"search",theme:"inverse",title:"Search"})}],w=[{id:"with-dropdown",label:"Bordered Inverse – With dropdown",demoStyles:_,storybookStyles:!0,element:s().createElement(u.A,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Bordered Inverse – Hint on hover",demoStyles:_,storybookStyles:!0,element:s().createElement(u.U,null,s().createElement(u.A,{assistiveText:"More options",iconClassName:"slds-button__icon_inverse-hint",size:"medium",theme:"inverse",title:"More Options"}))}],x="background-color: #f4f6f9; padding: 0.5rem;",T=[{id:"default",label:"Bordered Transparent - default",demoStyles:x,storybookStyles:!0,element:s().createElement(u.A,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search"})}],N=[{id:"disabled",label:"Bordered Transparent - Disabled",demoStyles:x,storybookStyles:!0,element:s().createElement(u.A,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search",disabled:!0})}],B=[{id:"with-dropdown",label:"Bordered Transparent - With dropdown",demoStyles:x,storybookStyles:!0,element:s().createElement(u.A,{theme:"transparent",hasDropdown:!0,className:"slds-button_icon-border",assistiveText:"More options",title:"More Options"})},{id:"hint-hover",label:"Bordered Transparent - Hint on hover",demoStyles:x,storybookStyles:!0,element:s().createElement("div",{className:"slds-hint-parent"},s().createElement(u.A,{theme:"transparent",iconClassName:"slds-button__icon_hint",assistiveText:"More options",title:"More Options"}))}],M=[{id:"default",label:"Brand – default",element:s().createElement(u.A,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search"})}],k=[{id:"disabled",label:"Brand – Disabled",element:s().createElement(u.A,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search",disabled:!0})}],C="background-color: #16325C; padding: 0.5rem;",P=[{id:"default",label:"Inverse – default",demoStyles:C,storybookStyles:!0,element:s().createElement(u.A,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search"})}],I=[{id:"disabled",label:"Inverse - Disabled",demoStyles:C,storybookStyles:!0,element:s().createElement(u.A,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search",disabled:!0})}],D=[{id:"with-dropdown",label:"Inverse - With dropdown",demoStyles:C,storybookStyles:!0,element:s().createElement(u.A,{hasDropdown:!0,theme:"transparent",className:"slds-button_icon-inverse",assistiveText:"More options",title:"More Options"})},{id:"hint-hover",label:"Inverse - Hint on hover",demoStyles:C,storybookStyles:!0,element:s().createElement("div",{className:"slds-hint-parent"},s().createElement(u.A,{theme:"inverse",iconClassName:"slds-button__icon_inverse-hint",assistiveText:"More options",title:"More Options"}))}],z=n(4187),G=n.n(z),j=function(e){return s().createElement(u.A,{"aria-pressed":e["aria-pressed"],assistiveText:e.assistiveText,disabled:e.disabled,selected:e.selected,symbol:e.symbol,theme:e.theme,title:e.title})};j.propTypes={title:G().string.isRequired,symbol:G().string.isRequired,assistiveText:G().string.isRequired,"aria-pressed":G().string,disabled:G().bool,selected:G().bool,theme:G().string},j.defaultProps={"aria-pressed":!1,disabled:!1,selected:!1,theme:null};var W=[{id:"default",label:"Stateful – default",element:s().createElement(j,{"aria-pressed":"false",assistiveText:"Like",symbol:"like",theme:"neutral",title:"Like"})}],F=[{id:"button-icon-stateful-selected",label:"Stateful - Selected",element:s().createElement(j,{title:"Like",symbol:"like",theme:"neutral",assistiveText:"Like","aria-pressed":"true",selected:!0})},{id:"button-icon-stateful-disabled",label:"Stateful - Disabled",element:s().createElement(j,{title:"Pin",symbol:"pin",theme:"neutral",assistiveText:"Pin","aria-pressed":"false",disabled:!0})},{id:"button-icon-stateful-selected-disabled",label:"Stateful - Selected Disabled",element:s().createElement(j,{title:"Pin",symbol:"pinned",theme:"neutral",assistiveText:"Pin","aria-pressed":"true",selected:!0,disabled:!0})}],L="background-color: #f4f6f9; padding: 0.5rem;",H=[{id:"default",label:"Transparent - default",demoStyles:L,storybookStyles:!0,element:s().createElement(u.A,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search"})}],U=[{id:"disabled",label:"Transparent - Disabled",demoStyles:L,storybookStyles:!0,element:s().createElement(u.A,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search",disabled:!0})}],X=[{id:"with-dropdown",label:"Transparent - With dropdown",demoStyles:L,storybookStyles:!0,element:s().createElement(u.A,{assistiveText:"More options",title:"More Options",hasDropdown:!0,theme:"transparent"})},{id:"hint-hover",label:"Transparent - Hint on hover",demoStyles:L,storybookStyles:!0,element:s().createElement("div",{className:"slds-hint-parent"},s().createElement(u.A,{assistiveText:"More options",title:"More Options",size:"medium",iconClassName:"slds-button__icon_hint"}))}],q=n(806),R=n(9285),J=o.XB.a,V=o.XB.code,Q=o.XB.h2,Y=o.XB.h3,$=o.XB.h4,K=o.XB.p,Z=function(){return(0,l.createElement)(o.Ay,{},(0,l.createElement)("div",{className:"lead doc"},"Button icons provide the user with visual iconography that is typically used to invoke an event or action."),(0,l.createElement)(r.A,{exampleOnly:!0},(0,l.createElement)(l.Fragment,null,(0,l.createElement)(u.A,{iconClassName:"slds-button__icon_large",assistiveText:"More options",title:"More Options"}),(0,l.createElement)(u.A,{iconClassName:"slds-button__icon_small",assistiveText:"More options",title:"More Options"}),(0,l.createElement)(u.A,{iconClassName:"slds-button__icon_x-small",assistiveText:"More options",title:"More Options"}))),Q({id:"About-Button-Icons"},"About Button Icons"),K({},"Button icons are button elements that represent their behavior with an ",J({href:"/components/icons"},"icon")," instead of text. The button itself should have the classes ",V({},"slds-button")," and ",V({},"slds-button_icon"),", while the svg icon has ",V({},"slds-button__icon")," on it. Size modifiers can be added, the default sizing represents a medium variant."),K({},"Some styling variations require the button to receive additional 'container' classes that remove the button styling and/or add borders. See below for more detail."),Y({id:"Accessibility"},"Accessibility"),K({},"If an icon button doesn’t include a label, use a ",V({},"title")," attribute to show on hover for sighted users, and a span with class ",V({},"slds-assistive-text")," to describe the button's action for screen readers."),K({},"When using assistive text, the icon element itself should have ",V({},"aria-hidden")," set to ",V({},"true"),"."),(0,l.createElement)(i.A,{type:"a11y",header:"Note"},(0,l.createElement)("p",null,"To display the modals blueprint close (X) button correctly, don’t use the"," ",(0,l.createElement)("code",null,"slds-button_icon-inverse")," class for your close button markup. The"," ",(0,l.createElement)("code",null,"slds-button_icon-inverse")," is no longer used in the modal blueprint.")),Y({id:"Mobile"},"Mobile"),(0,l.createElement)(R.s9,{patternSpecificText:"buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),(0,l.createElement)(r.A,{frameOnly:!0,frameTitle:"Example mobile styles for button icons"},(0,l.createElement)(l.Fragment,null,(0,l.createElement)(u.A,{iconClassName:"slds-button__icon_large",assistiveText:"More Options",title:"More Options"}),(0,l.createElement)(u.A,{iconClassName:"slds-button__icon_small",assistiveText:"More Options",title:"More Options"}),(0,l.createElement)(u.A,{iconClassName:"slds-button__icon_x-small",assistiveText:"More Options",title:"More Options"}))),Q({id:"Base"},"Base"),(0,l.createElement)(r.A,{toggleCode:!1},(0,q.NO)(p)),Q({id:"Variations"},"Variations"),Y({id:"Brand"},"Brand"),(0,l.createElement)(r.A,{toggleCode:!1},(0,q.NO)(M)),Y({id:"Inverse"},"Inverse"),(0,l.createElement)(r.A,{toggleCode:!1,demoStyles:(0,q.GP)(P)},(0,q.NO)(P)),Y({id:"Icon-Containers"},"Icon Containers"),K({},"Icon containers remove button styling from the button, leaving a bare icon."),K({},"For a bare icon with transparent container, add ",V({},"slds-button_icon-container")," to the ",V({},"<button>"),". To add a border, use the ",V({},"slds-button_icon-border")," class instead."),K({},"For a neutral themed button icon, with border and a filled background, use the ",V({},"slds-button_icon-border-filled")," class to the ",V({},"slds-button")," class."),K({},"Use the inverse button on dark backgrounds by adding the ",V({},"slds-button_inverse")," class to the ",V({},"slds-button")," class."),(0,l.createElement)(m.A,null,(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Bare - transparent container"),(0,l.createElement)(r.A,{toggleCode:!1,demoStyles:(0,q.GP)(H)},(0,q.NO)(H))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Bordered - filled container"),(0,l.createElement)(r.A,{toggleCode:!1,demoStyles:(0,q.GP)(f)},(0,q.NO)(f))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Bordered - transparent container"),(0,l.createElement)(r.A,{toggleCode:!1,demoStyles:(0,q.GP)(T)},(0,q.NO)(T))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Bordered inverse - transparent container"),(0,l.createElement)(r.A,{toggleCode:!1,demoStyles:(0,q.GP)(A)},(0,q.NO)(A)))),Y({id:"Stateful"},"Stateful"),K({},"The stateful button requires the ",V({},"slds-button_icon-border")," class in addition to the ",V({},"slds-button")," class.\nThe stateful inverse button works just like the stateful button. It requires the ",V({},"slds-button_icon-border-inverse")," class in addition to the ",V({},"slds-button")," class."),(0,l.createElement)(r.A,{toggleCode:!1},(0,q.NO)(W)),(0,l.createElement)(i.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"For accessibility, implement the ",(0,l.createElement)("a",{href:"http://w3c.github.io/aria-practices/#button"},"ARIA Toggle Button")," concept."),(0,l.createElement)("ul",{className:"slds-list_dotted"},(0,l.createElement)("li",null,"Similar to a mute button, the button represents a pressed or unpressed state."),(0,l.createElement)("li",null,"Button text doesn't change per state"),(0,l.createElement)("li",null,(0,l.createElement)("code",null,"aria-pressed")," is set to ",(0,l.createElement)("code",null,"true")," or ",(0,l.createElement)("code",null,"false"),", depending on its state"))),$({id:"Selected"},"Selected"),K({},"Stateful icons can be toggled on and off and will retain their state. JavaScript is used to add the ",V({},"slds-is-selected")," class to the button when activated."),(0,l.createElement)(r.A,null,(0,q.NO)(F,"button-icon-stateful-selected")),$({id:"Disabled"},"Disabled"),K({},"You can disable a stateful button icon by applying the ",V({},"disabled")," attribute to the ",V({},".slds-button_icon"),". This will apply our disabled UI to the button icon, and freeze the button icon either in its selected or unselected state."),(0,l.createElement)(r.A,null,(0,l.createElement)(l.Fragment,null,(0,q.NO)(F,"button-icon-stateful-disabled"),(0,q.NO)(F,"button-icon-stateful-selected-disabled"))),Q({id:"Sizes"},"Sizes"),Y({id:"Bare-Icon"},"Bare Icon"),K({},"The bare variant can be displayed in three other sizes—",V({},"large"),", ",V({},"small"),", ",V({},"x-small"),"—by adding a sizing class on the ",V({},"<svg>")," icon itself."),(0,l.createElement)(a.A,{toggleCode:!1},(0,l.createElement)("button",null,(0,l.createElement)("svg",{className:"... slds-button__icon_{size}"},"..."),"...")),(0,l.createElement)(d.A,{title:"Sizes"},(0,l.createElement)(r.A,null,(0,l.createElement)(l.Fragment,null,(0,l.createElement)(u.A,{iconClassName:"slds-button__icon_large",assistiveText:"More options",title:"More Options"}),(0,l.createElement)(u.A,{iconClassName:"slds-button__icon_small",assistiveText:"More options",title:"More Options"}),(0,l.createElement)(u.A,{iconClassName:"slds-button__icon_x-small",assistiveText:"More options",title:"More Options"})))),Y({id:"Icon-Container"},"Icon Container"),K({},"Contained variants can be displayed in four other sizes—",V({},"large"),", ",V({},"small"),", ",V({},"x-small"),", ",V({},"xx-small"),"—by adding a sizing class on the ",V({},"<button>"),"."),(0,l.createElement)(a.A,{toggleCode:!1},(0,l.createElement)("button",{className:"... slds-button_icon-{size}"},"...")),(0,l.createElement)(d.A,{title:"Sizes"},(0,l.createElement)(r.A,null,(0,l.createElement)(l.Fragment,null,(0,l.createElement)(u.A,{className:"slds-button_icon-border slds-button_icon-large",assistiveText:"More options",title:"More Options"}),(0,l.createElement)(u.A,{className:"slds-button_icon-border slds-button_icon-small",assistiveText:"More options",title:"More Options"}),(0,l.createElement)(u.A,{className:"slds-button_icon-border slds-button_icon-x-small",assistiveText:"More options",title:"More Options"}),(0,l.createElement)(u.A,{className:"slds-button_icon-border slds-button_icon-xx-small",assistiveText:"More options",title:"More Options"})))),Q({id:"States"},"States"),Y({id:"Disabled-2"},"Disabled"),K({},"Use a disabled attribute when a button can’t be clicked."),K({},"To create a disabled button, append the ",V({},"disabled")," attribute to the ",V({},"<button>"),"."),(0,l.createElement)(a.A,{toggleCode:!1},(0,l.createElement)("button",{className:"slds-button slds-button_icon ...",disabled:!0},"...")),(0,l.createElement)(m.A,null,(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Base"),(0,l.createElement)(r.A,null,(0,q.NO)(E,"bare-disabled"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Brand"),(0,l.createElement)(r.A,null,(0,q.NO)(k,"disabled"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Transparent container"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(U,"disabled")},(0,q.NO)(U,"disabled"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Inverse"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(I,"disabled")},(0,q.NO)(I,"disabled"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Bordered filled container"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(g,"disabled")},(0,q.NO)(g,"disabled"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Bordered transparent"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(N,"disabled")},(0,q.NO)(N,"disabled"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Bordered inverse"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(O,"disabled")},(0,q.NO)(O,"disabled")))),Y({id:"Error"},"Error"),K({},"Error button icons are typically used in conjunction with an ",J({href:"../popovers/#Error"},"error popover"),"."),(0,l.createElement)(r.A,{toggleCode:!1},(0,q.NO)(E,"error")),Y({id:"Warning"},"Warning"),K({},"Warning button icons are typically used in conjunction with a ",J({href:"../popovers/#Warning"},"warning popover"),"."),(0,l.createElement)(r.A,{toggleCode:!1},(0,q.NO)(E,"warning")),Q({id:"Examples"},"Examples"),Y({id:"Hint-on-hover"},"Hint on hover"),K({},"A parent class, ",V({},"slds-hint-parent"),", must be put on any wrapper, and ",V({},"slds-button__icon_hint")," must be added to the button's ",V({},"<svg>")," so that the child reacts when the parent is hovered."),(0,l.createElement)(a.A,{toggleCode:!1},(0,l.createElement)(u.U,null,(0,l.createElement)("button",{className:"slds-button slds-button_icon"},(0,l.createElement)("svg",{className:"slds-button__icon slds-button__icon_hint"},"..."),"..."))),(0,l.createElement)(m.A,null,(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Base"),(0,l.createElement)(r.A,null,(0,q.NO)(v,"hint-hover"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Transparent container"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(X,"hint-hover")},(0,q.NO)(X,"hint-hover"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Bordered filled container"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(S,"hint-hover")},(0,q.NO)(S,"hint-hover"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Bordered transparent"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(B,"hint-hover")},(0,q.NO)(B,"hint-hover")))),$({id:"Inverse-2"},"Inverse"),K({},"In the case of inverse, use the ",V({},"slds-button__icon_inverse-hint")," class on the button's ",V({},"<svg>")," instead."),(0,l.createElement)(a.A,{toggleCode:!1},(0,l.createElement)(u.U,null,(0,l.createElement)("button",{className:"slds-button slds-button_icon"},(0,l.createElement)("svg",{className:"slds-button__icon slds-button__icon_inverse-hint"},"..."),"..."))),(0,l.createElement)(m.A,null,(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Inverse"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(D,"hint-hover")},(0,q.NO)(D,"hint-hover"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Bordered inverse"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(w,"hint-hover")},(0,q.NO)(w,"hint-hover")))),Y({id:"With-a-Dropdown"},"With a Dropdown"),K({},"If the button opens a menu, add ",V({},"slds-button_icon-more")," class to the bordered variant or ",V({},"slds-button_icon-container-more")," to the transparent variant's ",V({},"<button>")," and a ",V({},"down")," icon within the button to indicate the behavior."),(0,l.createElement)(a.A,{toggleCode:!1},(0,l.createElement)("button",{className:"slds-button slds-button_icon slds-button_icon-container-more"},"...",(0,l.createElement)("svg",{className:"slds-button__icon slds-button__icon_x-small"},(0,l.createElement)("use",{xlinkHref:"/assets/icons/utility-sprite/svg/symbols.svg#down"})),"...")),(0,l.createElement)(m.A,null,(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Transparent container"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(X,"with-dropdown")},(0,q.NO)(X,"with-dropdown"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Inverse"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(D,"with-dropdown")},(0,q.NO)(D,"with-dropdown"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Bordered filled container"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(S,"with-dropdown")},(0,q.NO)(S,"with-dropdown"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Bordered inverse"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(w,"with-dropdown")},(0,q.NO)(w,"with-dropdown"))),(0,l.createElement)(c.A,null,(0,l.createElement)("strong",null,"Bordered transparent"),(0,l.createElement)(r.A,{demoStyles:(0,q.GP)(B,"with-dropdown")},(0,q.NO)(B,"with-dropdown")))))},ee=function(){return(0,o.Qr)(Z())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},s={};function o(e){var t=s[e];if(void 0!==t)return t.exports;var n=s[e]={id:e,exports:{}};return l[e](n,n.exports,o),n.exports}o.m=l,o.amdO={},e=[],o.O=function(t,n,l,s){if(!n){var r=1/0;for(c=0;c<e.length;c++){n=e[c][0],l=e[c][1],s=e[c][2];for(var a=!0,i=0;i<n.length;i++)(!1&s||r>=s)&&Object.keys(o.O).every(function(e){return o.O[e](n[i])})?n.splice(i--,1):(a=!1,s<r&&(r=s));if(a){e.splice(c--,1);var d=l();void 0!==d&&(t=d)}}return t}s=s||0;for(var c=e.length;c>0&&e[c-1][2]>s;c--)e[c]=e[c-1];e[c]=[n,l,s]},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},o.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var s=Object.create(null);o.r(s);var r={};t=t||[null,n({}),n([]),n(n)];for(var a=2&l&&e;("object"==typeof a||"function"==typeof a)&&!~t.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},o.d(s,r),s},o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.e=function(){return Promise.resolve()},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.j=6794,function(){var e={6794:0};o.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,s,r=n[0],a=n[1],i=n[2],d=0;if(r.some(function(t){return 0!==e[t]})){for(l in a)o.o(a,l)&&(o.m[l]=a[l]);if(i)var c=i(o)}for(t&&t(n);d<r.length;d++)s=r[d],o.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return o.O(c)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),o.nc=void 0;var r=o.O(void 0,[3540],function(){return o(1166)});r=o.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/button-icons/docs.mdx.js"]=r}();