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

Salesforce Lightning Design System

var SLDS=SLDS||{};SLDS["__internal/chunked/docs/ui/components/button-icons/docs.mdx.js"]=function(e){function t(t){for(var n,r,o=t[0],i=t[1],d=t[2],c=0,m=[];c<o.length;c++)r=o[c],a[r]&&m.push(a[r][0]),a[r]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(u&&u(t);m.length;)m.shift()();return s.push.apply(s,d||[]),l()}function l(){for(var e,t=0;t<s.length;t++){for(var l=s[t],n=!0,o=1;o<l.length;o++){var i=l[o];0!==a[i]&&(n=!1)}n&&(s.splice(t--,1),e=r(r.s=l[0]))}return e}var n={},a={6:0},s=[];function r(t){if(n[t])return n[t].exports;var l=n[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,r),l.l=!0,l.exports}r.m=e,r.c=n,r.d=function(e,t,l){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:l})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],i=o.push.bind(o);o.push=t,o=o.slice();for(var d=0;d<o.length;d++)t(o[d]);var u=i;return s.push([96,0]),l()}({0:function(e,t){e.exports=React},6:function(e,t){e.exports=JSBeautify},89:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.states=t.Context=void 0;var n=s(l(0)),a=s(l(3));function s(e){return e&&e.__esModule?e:{default:e}}t.Context=function(e){return n.default.createElement("div",{style:{padding:"0.5rem",backgroundColor:"#f4f6f9"}},e.children)};t.default=n.default.createElement(a.default,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search"});t.states=[{id:"disabled",label:"Disabled",element:n.default.createElement(a.default,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search",disabled:!0})}],t.examples=[{id:"with-dropdown",label:"With dropdown",element:n.default.createElement(a.default,{assistiveText:"More options",title:"More Options",hasDropdown:!0,theme:"transparent"})},{id:"hint-hover",label:"Hint on hover",element:n.default.createElement("div",{className:"slds-hint-parent"},n.default.createElement(a.default,{assistiveText:"More options",title:"More Options",size:"medium",iconClassName:"slds-button__icon_hint"}))}]},90:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.states=t.Context=void 0;var n=s(l(0)),a=s(l(3));function s(e){return e&&e.__esModule?e:{default:e}}t.Context=function(e){return n.default.createElement("div",{style:{padding:"0.5rem",backgroundColor:"#16325C"}},e.children)};t.default=n.default.createElement(a.default,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search"});t.states=[{id:"disabled",label:"Disabled",element:n.default.createElement(a.default,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search",disabled:!0})}],t.examples=[{id:"with-dropdown",label:"With dropdown",element:n.default.createElement(a.default,{hasDropdown:!0,theme:"transparent",className:"slds-button_icon-inverse",assistiveText:"More options",title:"More Options"})},{id:"hint-hover",label:"Hint on hover",element:n.default.createElement("div",{className:"slds-hint-parent"},n.default.createElement(a.default,{theme:"inverse",iconClassName:"slds-button__icon_inverse-hint",assistiveText:"More options",title:"More Options"}))}]},91:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.states=void 0;var n=s(l(0)),a=s(l(3));function s(e){return e&&e.__esModule?e:{default:e}}t.default=n.default.createElement(a.default,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search"});t.states=[{id:"disabled",label:"Disabled",element:n.default.createElement(a.default,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search",disabled:!0})}]},92:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.states=t.Context=void 0;var n=s(l(0)),a=s(l(3));function s(e){return e&&e.__esModule?e:{default:e}}t.Context=function(e){return n.default.createElement("div",{style:{padding:"0.5rem",backgroundColor:"#f4f6f9"}},e.children)};t.default=n.default.createElement(a.default,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search"});t.states=[{id:"disabled",label:"Disabled",element:n.default.createElement(a.default,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search",disabled:!0})}],t.examples=[{id:"hint-hover",label:"Hint on hover",element:n.default.createElement("div",{className:"slds-hint-parent"},n.default.createElement(a.default,{theme:"transparent",iconClassName:"slds-button__icon_hint",assistiveText:"More options",title:"More Options"}))}]},93:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.states=t.Context=void 0;var n=r(l(0)),a=l(3),s=r(a);function r(e){return e&&e.__esModule?e:{default:e}}t.Context=function(e){return n.default.createElement("div",{style:{padding:"0.5rem",backgroundColor:"#16325C"}},e.children)};t.default=n.default.createElement(s.default,{assistiveText:"Search",size:"medium",symbol:"search",theme:"inverse",title:"Search"});t.states=[{id:"disabled",label:"Disabled",element:n.default.createElement(s.default,{assistiveText:"Search",disabled:!0,size:"medium",symbol:"search",theme:"inverse",title:"Search"})}],t.examples=[{id:"with-dropdown",label:"With dropdown",element:n.default.createElement(s.default,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Hint on hover",element:n.default.createElement(a.HintParent,null,n.default.createElement(s.default,{assistiveText:"More options",iconClassName:"slds-button__icon_inverse-hint",size:"medium",theme:"inverse",title:"More Options"}))}]},94:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.states=t.Context=void 0;var n=r(l(0)),a=l(3),s=r(a);function r(e){return e&&e.__esModule?e:{default:e}}t.Context=function(e){return n.default.createElement("div",{style:{padding:"0.5rem",backgroundColor:"#f4f6f9"}},e.children)};t.default=n.default.createElement(s.default,{assistiveText:"Search",symbol:"search",theme:"neutral",title:"Search"});t.states=[{id:"disabled",label:"Disabled",element:n.default.createElement(s.default,{assistiveText:"Search",disabled:!0,symbol:"search",theme:"neutral",title:"Search"})}],t.examples=[{id:"with-dropdown",label:"With dropdown",element:n.default.createElement(s.default,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Hint on hover",element:n.default.createElement(a.HintParent,null,n.default.createElement(s.default,{assistiveText:"More options",iconClassName:"slds-button__icon_hint",theme:"neutral",title:"More Options"}))}]},95:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.states=void 0;var n=r(l(0)),a=l(3),s=r(a);function r(e){return e&&e.__esModule?e:{default:e}}t.default=n.default.createElement(s.default,{assistiveText:"Settings",title:"Settings"});t.states=[{id:"error",label:"Error",element:n.default.createElement(s.default,{feedback:"error",symbol:"error",title:"Error",assistiveText:"Error"})},{id:"bare-disabled",label:"Disabled",element:n.default.createElement(s.default,{assistiveText:"Settings",disabled:!0,title:"Settings"})}],t.examples=[{id:"hint-hover",label:"Hint on hover",element:n.default.createElement(a.HintParent,null,n.default.createElement(s.default,{assistiveText:"Settings",iconClassName:"slds-button__icon_hint",title:"Settings"}))}]},96:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getContents=t.getElement=void 0;var n=l(0),a=M(n),s=l(7),r=M(s),o=M(l(9)),i=M(l(11)),d=M(l(12)),u=M(l(10)),c=M(l(36)),m=M(l(45)),f=l(3),b=M(f),h=S(l(95)),E=S(l(94)),p=S(l(93)),g=S(l(92)),v=S(l(91)),_=S(l(90)),x=S(l(68)),y=S(l(89)),C=l(5);M(C);function S(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&(t[l]=e[l]);return t.default=e,t}function M(e){return e&&e.__esModule?e:{default:e}}var w=s.factories.a,B=s.factories.code,D=s.factories.h2,T=s.factories.h3,I=s.factories.h4,N=s.factories.p,O=t.getElement=function(){return(0,n.createElement)(r.default,{},(0,n.createElement)("div",{className:"lead doc"},"Button icons provide the user with visual iconography that is typically used to invoke an event or action."),D({id:"Accessibility"},"Accessibility"),(0,n.createElement)(d.default,{type:"a11y",header:"Accessibility Note"},"If an icon button doesn’t include a label, use a ",(0,n.createElement)("code",{className:"doc"},"title")," attribute to show on hover for sighted users, and a span with class ",(0,n.createElement)("code",{className:"doc"},"slds-assistive-text")," to describe the button's action for screen readers."),D({id:"Variations"},"Variations"),T({id:"Base"},"Base"),(0,n.createElement)(o.default,{toggleCode:!1},h.default),T({id:"Brand"},"Brand"),(0,n.createElement)(o.default,{toggleCode:!1},v.default),T({id:"Inverse"},"Inverse"),(0,n.createElement)(o.default,{toggleCode:!1},(0,n.createElement)(_.Context,null,_.default)),T({id:"Icon-Containers"},"Icon Containers"),N({},"Icon containers create a button that looks like a plain icon."),N({},"For a bare icon with transparent container, add ",B({},"slds-button_icon-container")," to the ",B({},"<button>"),". To add a border, use the ",B({},"slds-button_icon-border")," class instead."),N({},"For a neutral themed button icon, with border and a filled background, use the ",B({},"slds-button_icon-border-filled")," class to the ",B({},"slds-button")," class."),N({},"Use the inverse button on dark backgrounds. Add the ",B({},"slds-button_inverse")," class to the ",B({},"slds-button")," class."),(0,n.createElement)(m.default,null,(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Bare - transparent container"),(0,n.createElement)(o.default,{toggleCode:!1},(0,n.createElement)(y.Context,null,y.default))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Bordered - filled container"),(0,n.createElement)(o.default,{toggleCode:!1},(0,n.createElement)(E.Context,null,E.default))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Bordered - transparent container"),(0,n.createElement)(o.default,{toggleCode:!1},(0,n.createElement)(g.Context,null,g.default))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Bordered inverse - transparent container"),(0,n.createElement)(o.default,{toggleCode:!1},(0,n.createElement)(p.Context,null,p.default)))),T({id:"Stateful"},"Stateful"),N({},"The stateful button requires the ",B({},"slds-button_icon-border")," class in addition to the ",B({},"slds-button")," class."),N({},"The stateful inverse button works just like the stateful button. It requires the ",B({},"slds-button_icon-border-inverse")," class in addition to the ",B({},"slds-button")," class."),(0,n.createElement)(o.default,{toggleCode:!1},x.default),(0,n.createElement)(d.default,{type:"a11y",header:"Accessibility Note"},"For accessibility, implement the ",(0,n.createElement)("a",{href:"http://w3c.github.io/aria-practices/#button"},"ARIA Toggle Button")," concept.",(0,n.createElement)("ul",{className:"slds-list_dotted"},(0,n.createElement)("li",null,"Similar to a mute button, the button represents a pressed or unpressed state."),(0,n.createElement)("li",null,"Button text doesn't change per state"),(0,n.createElement)("li",null,(0,n.createElement)("code",{className:"doc"},"aria-pressed")," is set to ",(0,n.createElement)("code",{className:"doc"},"true")," or ",(0,n.createElement)("code",{className:"doc"},"false"),", depending on its state"))),I({id:"Selected"},"Selected"),N({},"Stateful icons can be toggled on and off and will retain their state. JavaScript is used to add the ",B({},"slds-is-selected")," class to the button when activated."),(0,n.createElement)(o.default,{toggleCode:!0},(0,C.getDisplayElementById)(x.states,"button-icon-stateful-selected")),I({id:"Disabled"},"Disabled"),N({},"You can disable a stateful button icon by applying the ",B({},"disabled")," attribute to the ",B({},".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,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(n.Fragment,null,(0,C.getDisplayElementById)(x.states,"button-icon-stateful-disabled"),(0,C.getDisplayElementById)(x.states,"button-icon-stateful-selected-disabled"))),D({id:"Sizes"},"Sizes"),T({id:"Bare-Icon"},"Bare Icon"),N({},"The bare variant can be displayed in three other sizes—",B({},"large"),", ",B({},"small"),", ",B({},"x-small"),"—by adding a sizing class on the ",B({},"<svg>")," icon itself."),(0,n.createElement)(i.default,{toggleCode:!1},(0,n.createElement)("button",null,(0,n.createElement)("svg",{className:"...slds-button__icon_{size}"},"..."),"...")),(0,n.createElement)(u.default,{title:"Sizes"},(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(a.default.Fragment,null,(0,n.createElement)(b.default,{iconClassName:"slds-button__icon_large",assistiveText:"More options",title:"More Options"}),(0,n.createElement)(b.default,{iconClassName:"slds-button__icon_small",assistiveText:"More options",title:"More Options"}),(0,n.createElement)(b.default,{iconClassName:"slds-button__icon_x-small",assistiveText:"More options",title:"More Options"})))),T({id:"Icon-Container"},"Icon Container"),N({},"Contained variants can be displayed in three smaller sizes—",B({},"small"),", ",B({},"x-small"),", ",B({},"xx-small"),"—by adding a sizing class on the ",B({},"<button>"),"."),(0,n.createElement)(i.default,{toggleCode:!1},(0,n.createElement)("button",{className:"...slds-button_icon-{size}"},"...")),(0,n.createElement)(u.default,{title:"Sizes"},(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(a.default.Fragment,null,(0,n.createElement)(b.default,{className:"slds-button_icon-border slds-button_icon-small",assistiveText:"More options",title:"More Options"}),(0,n.createElement)(b.default,{className:"slds-button_icon-border slds-button_icon-x-small",assistiveText:"More options",title:"More Options"}),(0,n.createElement)(b.default,{className:"slds-button_icon-border slds-button_icon-xx-small",assistiveText:"More options",title:"More Options"})))),D({id:"States"},"States"),T({id:"Disabled-2"},"Disabled"),N({},"Use a disabled attribute when a button can’t be clicked."),N({},"To create a disabled button, append the ",B({},"disabled")," attribute to the ",B({},"<button>"),"."),(0,n.createElement)(i.default,{toggleCode:!1},(0,n.createElement)("button",{className:"slds-button slds-button_icon ...",disabled:!0},"...")),(0,n.createElement)(m.default,null,(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Base"),(0,n.createElement)(o.default,{toggleCode:!0},(0,C.getDisplayElementById)(h.states,"bare-disabled"))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Brand"),(0,n.createElement)(o.default,{toggleCode:!0},(0,C.getDisplayElementById)(v.states,"disabled"))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Transparent container"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(y.Context,null,(0,C.getDisplayElementById)(y.states,"disabled")))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Inverse"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(_.Context,null,(0,C.getDisplayElementById)(_.states,"disabled")))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Bordered filled container"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(E.Context,null,(0,C.getDisplayElementById)(E.states,"disabled")))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Bordered transparent"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(g.Context,null,(0,C.getDisplayElementById)(g.states,"disabled")))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Bordered inverse"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(p.Context,null,(0,C.getDisplayElementById)(p.states,"disabled"))))),T({id:"Error"},"Error"),N({},"Error button icons are typically used in conjunction with an ",w({href:"../popovers/?variant=error"},"error popover"),"."),(0,n.createElement)(o.default,{toggleCode:!1},(0,C.getDisplayElementById)(h.states,"error")),D({id:"Examples"},"Examples"),T({id:"Hint-on-hover"},"Hint on hover"),N({},"A parent class, ",B({},"slds-hint-parent"),", must be put on any wrapper, and ",B({},"slds-button__icon_hint")," must be added to the button's ",B({},"<svg>")," so that the child reacts when the parent is hovered."),(0,n.createElement)(i.default,{toggleCode:!1},(0,n.createElement)(f.HintParent,null,(0,n.createElement)("button",{className:"slds-button slds-button_icon"},(0,n.createElement)("svg",{className:"slds-button__icon slds-button__icon_hint"},"..."),"..."))),(0,n.createElement)(m.default,null,(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Base"),(0,n.createElement)(o.default,{toggleCode:!0},(0,C.getDisplayElementById)(h.examples,"hint-hover"))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Transparent container"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(y.Context,null,(0,C.getDisplayElementById)(y.examples,"hint-hover")))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Bordered filled container"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(E.Context,null,(0,C.getDisplayElementById)(E.examples,"hint-hover")))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Bordered transparent"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(g.Context,null,(0,C.getDisplayElementById)(g.examples,"hint-hover"))))),I({id:"Inverse-2"},"Inverse"),N({},"In the case of inverse, use the ",B({},"slds-button__icon_inverse-hint")," class on the button's ",B({},"<svg>")," instead."),(0,n.createElement)(i.default,{toggleCode:!1},(0,n.createElement)(f.HintParent,null,(0,n.createElement)("button",{className:"slds-button slds-button_icon"},(0,n.createElement)("svg",{className:"slds-button__icon slds-button__icon_inverse-hint"},"..."),"..."))),(0,n.createElement)(m.default,null,(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Inverse"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(_.Context,null,(0,C.getDisplayElementById)(_.examples,"hint-hover")))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Bordered inverse"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(p.Context,null,(0,C.getDisplayElementById)(p.examples,"hint-hover"))))),T({id:"With-a-Dropdown"},"With a Dropdown"),N({},"If the button opens a menu, add ",B({},"slds-button_icon-more")," class to the ",B({},"<button>")," and a ",B({},"down")," icon within the button to indicate the behavior."),(0,n.createElement)(i.default,{toggleCode:!1},(0,n.createElement)("button",{className:"slds-button slds-button_icon slds-button_icon-container-more"},"...",(0,n.createElement)("svg",{className:"slds-button__icon slds-button__icon_x-small"},(0,n.createElement)("use",{xlinkHref:"/assets/icons/utility-sprite/svg/symbols.svg#down"})),"...")),(0,n.createElement)(m.default,null,(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Transparent container"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(y.Context,null,(0,C.getDisplayElementById)(y.examples,"with-dropdown")))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Inverse"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(_.Context,null,(0,C.getDisplayElementById)(_.examples,"with-dropdown")))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Bordered filled container"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(E.Context,null,(0,C.getDisplayElementById)(E.examples,"with-dropdown")))),(0,n.createElement)(c.default,null,(0,n.createElement)("strong",null,"Bordered inverse"),(0,n.createElement)(o.default,{toggleCode:!0},(0,n.createElement)(p.Context,null,(0,C.getDisplayElementById)(E.examples,"with-dropdown"))))))};t.getContents=function(){return(0,s.createTableOfContents)(O())}}});