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

Salesforce Lightning Design System

var SLDS=SLDS||{};SLDS["__internal/chunked/docs/ui/components/badges/docs.mdx.js"]=function(e){function t(t){for(var l,r,s=t[0],o=t[1],d=t[2],u=0,g=[];u<s.length;u++)r=s[u],a[r]&&g.push(a[r][0]),a[r]=0;for(l in o)Object.prototype.hasOwnProperty.call(o,l)&&(e[l]=o[l]);for(c&&c(t);g.length;)g.shift()();return i.push.apply(i,d||[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],l=!0,s=1;s<n.length;s++){var o=n[s];0!==a[o]&&(l=!1)}l&&(i.splice(t--,1),e=r(r.s=n[0]))}return e}var l={},a={22:0},i=[];function r(t){if(l[t])return l[t].exports;var n=l[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=l,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},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 s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],o=s.push.bind(s);s.push=t,s=s.slice();for(var d=0;d<s.length;d++)t(s[d]);var c=o;return i.push([254,0]),n()}({0:function(e,t){e.exports=React},253:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=void 0;var l=function(e){return e&&e.__esModule?e:{default:e}}(n(0)),a=n(33);t.default=l.default.createElement(a.Badge,null,"Badge Label");t.examples=[{id:"inverse",label:"Inverse",element:l.default.createElement(a.InverseBadge,null,"Inverse badge")},{id:"with-left-icon",label:"With left icon",element:l.default.createElement(a.Badge,null,l.default.createElement(a.BadgeIcon,{symbol:"moneybag"}),"423 Credits Available")},{id:"with-right-icon",label:"With right icon",element:l.default.createElement(a.Badge,null,"423 Credits Available",l.default.createElement(a.BadgeIcon,{symbol:"moneybag",align:"right"}))},{id:"light-with-left-icon",label:"Light with left icon",element:l.default.createElement(a.LightestBadge,null,l.default.createElement(a.BadgeIcon,{symbol:"moneybag"}),"423 Credits Available")},{id:"light-with-right-icon",label:"Light with right icon",element:l.default.createElement(a.LightestBadge,null,"423 Credits Available",l.default.createElement(a.BadgeIcon,{symbol:"moneybag",align:"right"}))},{id:"inverse-with-left-icon",label:"Inverse with left icon",element:l.default.createElement(a.InverseBadge,null,l.default.createElement(a.BadgeIcon,{symbol:"moneybag",isInverse:!0}),"423 Credits Available")},{id:"inverse-with-right-icon",label:"Inverse with right icon",element:l.default.createElement(a.InverseBadge,null,"423 Credits Available",l.default.createElement(a.BadgeIcon,{symbol:"moneybag",align:"right",isInverse:!0}))},{id:"badge-with-child",label:"With Child Element",element:l.default.createElement(a.Badge,null,"Component In: ",l.default.createElement("em",null,"Lightning"))}]},254:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getContents=t.getElement=void 0;var l=n(0),a=(h(l),n(7)),i=h(a),r=h(n(10)),s=h(n(9)),o=h(n(36)),d=h(n(45)),c=(n(8),function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}(n(253))),u=n(33),g=n(5);function h(e){return e&&e.__esModule?e:{default:e}}var f=a.factories.a,m=a.factories.code,b=a.factories.h2,p=a.factories.p,E=a.factories.table,y=a.factories.tbody,v=a.factories.td,B=a.factories.th,_=a.factories.thead,w=a.factories.tr,I=t.getElement=function(){return(0,l.createElement)(i.default,{},(0,l.createElement)("div",{className:"lead"},"Badges are labels which hold small amounts of information."),(0,l.createElement)(s.default,{toggleCode:!1},c.default),b({id:"Badge-Colors"},"Badge Colors"),p({},"There are three different color badges you can use."),E({},_({},w({},B({},"Badge"),B({},"class"),B({},"description"))),y({},w({},v({},(0,l.createElement)(u.Badge,{key:"1"},"Default Badge")),v({},m({},".slds-badge")),v({},"This is the default badge. You probably want to use this one unless you fall into a specific use-case.")),w({},v({},(0,l.createElement)(u.InverseBadge,{key:"2"},"Darker Badge")),v({},m({},".slds-badge_inverse")),v({},"This badge is used when you need higher contrast than our default badge.")),w({},v({},(0,l.createElement)(u.LightestBadge,{key:"3"},"Lightest Badge")),v({},m({},".slds-badge_lightest")),v({},"This badge is used when you need higher contrast, such as on colored backgrounds.")))),b({id:"Badges-with-Icons"},"Badges with Icons"),p({},"You can include an icon in your badge. For maximum visual clarity, ",f({href:"/icons/#utility"},"Utility icons")," are the suggested icon type inside badges. You may also choose to put an icon in a badge without text, but in that case, be sure to include assistive text."),p({},"The icon can be aligned to the left or right side of the text. To use an icon, wrap the icon with ",m({},'<span class="slds-badge__icon">'),". Add the classes ",m({},"slds-badge__icon_left")," or ",m({},"slds-badge__icon_right")," to the wrapper for spacing the icon in relation to the text label."),(0,l.createElement)(d.default,null,(0,l.createElement)(o.default,null,(0,l.createElement)("strong",null,"Base: Icon on the left"),(0,l.createElement)(s.default,null,(0,g.getDisplayElementById)(c.examples,"with-left-icon"))),(0,l.createElement)(o.default,null,(0,l.createElement)("strong",null,"Base: Icon on the right"),(0,l.createElement)(s.default,null,(0,g.getDisplayElementById)(c.examples,"with-right-icon"))),(0,l.createElement)(o.default,null,(0,l.createElement)(s.default,null,(0,g.getDisplayElementById)(c.examples,"light-with-left-icon"))),(0,l.createElement)(o.default,null,(0,l.createElement)(s.default,null,(0,g.getDisplayElementById)(c.examples,"light-with-right-icon")))),p({},"When using inverse themed badges, add the ",m({},"slds-badge__icon_inverse")," class to ",m({},"slds-badge__icon")," to inverse the icon."),(0,l.createElement)(d.default,null,(0,l.createElement)(o.default,null,(0,l.createElement)("strong",null,"Icon on the left"),(0,l.createElement)(s.default,null,(0,g.getDisplayElementById)(c.examples,"inverse-with-left-icon"))),(0,l.createElement)(o.default,null,(0,l.createElement)("strong",null,"Icon on the right"),(0,l.createElement)(s.default,null,(0,g.getDisplayElementById)(c.examples,"inverse-with-right-icon")))),b({id:"Badges-with-Nested-Elements"},"Badges with Nested Elements"),p({},"Along with icons, you can have nested textual elements, such as ",m({},"strong"),", ",m({},"em"),", and ",m({},"span")," elements, within a badge. Only ",m({},"inline")," and ",m({},"inline-block")," elements are supported at this time."),(0,l.createElement)(r.default,{title:"Badge with nested element"},(0,l.createElement)(s.default,{toggleCode:!1},(0,l.createElement)(u.Badge,null,"Component In: ",(0,l.createElement)("strong",null,"Lightning")))))};t.getContents=function(){return(0,a.createTableOfContents)(I())}},6:function(e,t){e.exports=JSBeautify}});