@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 8.16 kB
JavaScript
var SLDS;!function(){"use strict";var e,t,n,i={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},9279:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return S},getElement:function(){return A}});var i=n(1594),l=n.n(i),r=n(5671),o=n(1374),a=n(6547),s=n(2436),c=n(9582),u=(n(538),n(8342)),d=n(9382),h=l().createElement(d.Ex,null,"Badge Label"),g=[{id:"inverse",label:"Inverse",element:l().createElement(d.S3,null,"Inverse badge")},{id:"with-left-icon",label:"With left icon",element:l().createElement(d.Ex,null,l().createElement(d.bh,{symbol:"moneybag"}),"423 Credits Available")},{id:"with-right-icon",label:"With right icon",element:l().createElement(d.Ex,null,"423 Credits Available",l().createElement(d.bh,{symbol:"moneybag",align:"right"}))},{id:"light-with-left-icon",label:"Light with left icon",element:l().createElement(d._O,null,l().createElement(d.bh,{symbol:"moneybag"}),"423 Credits Available")},{id:"light-with-right-icon",label:"Light with right icon",element:l().createElement(d._O,null,"423 Credits Available",l().createElement(d.bh,{symbol:"moneybag",align:"right"}))},{id:"inverse-with-left-icon",label:"Inverse with left icon",element:l().createElement(d.S3,null,l().createElement(d.bh,{symbol:"moneybag",isInverse:!0}),"423 Credits Available")},{id:"inverse-with-right-icon",label:"Inverse with right icon",element:l().createElement(d.S3,null,"423 Credits Available",l().createElement(d.bh,{symbol:"moneybag",align:"right",isInverse:!0}))},{id:"badge-with-child",label:"With Child Element",element:l().createElement(d.Ex,null,"Component In: ",l().createElement("em",null,"Lightning"))}],m=(d.Ex,d.Ex,d.Ex,n(806)),b=r.XB.a,f=r.XB.code,E=r.XB.h2,y=r.XB.h3,v=r.XB.p,p=r.XB.table,w=r.XB.tbody,_=r.XB.td,O=r.XB.th,B=r.XB.thead,x=r.XB.tr,A=function(){return(0,i.createElement)(r.Ay,{},(0,i.createElement)("div",{className:"doc lead"},"Badges are labels which hold small amounts of information."),(0,i.createElement)(a.A,{exampleOnly:!0},(0,m.NO)(h)),E({id:"About-Badges"},"About Badges"),v({},"Badges are composed of text inside a ",f({},"span")," element and may include inline/inline-block elements and/or icons."),y({id:"Colors"},"Colors"),v({},"There are six different color badges you can use."),p({},B({},x({},O({},"Badge"),O({},"class"),O({},"description"))),w({},x({},_({},(0,i.createElement)(d.Ex,{key:"1"},"Default Badge")),_({},f({},".slds-badge")),_({},"This is the default badge. You probably want to use this one unless you fall into a specific use-case.")),x({},_({},(0,i.createElement)(d.S3,{key:"2"},"Darker Badge")),_({},f({},".slds-badge_inverse")),_({},"This badge is used when you need higher contrast than our default badge.")),x({},_({},(0,i.createElement)(d._O,{key:"3"},"Lightest Badge")),_({},f({},".slds-badge_lightest")),_({},"This badge is used when you need higher contrast, such as on colored backgrounds.")),x({},_({},(0,i.createElement)(d.Ex,{key:"4",isSuccess:!0},"Success Badge")),_({},f({},".slds-badge .slds-theme_success")),_({},"This is a badge used to communicate success.")),x({},_({},(0,i.createElement)(d.Ex,{key:"5",isWarning:!0},"Warning Badge")),_({},f({},".slds-badge .slds-theme_warning")),_({},"This is a badge used to communicate a warning.")),x({},_({},(0,i.createElement)(d.Ex,{key:"6",isError:!0},"Error Badge")),_({},f({},".slds-badge .slds-theme_error")),_({},"This is a badge used to communicate an error.")))),E({id:"Base"},"Base"),(0,i.createElement)(a.A,{toggleCode:!1},(0,m.NO)(h)),E({id:"Badges-with-Icons"},"Badges with Icons"),v({},"You can include an icon in your badge. For maximum visual clarity, ",b({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."),v({},"The icon can be aligned to the left or right side of the text. To use an icon, wrap the icon with ",f({},'<span class="slds-badge__icon">'),". Add the classes ",f({},"slds-badge__icon_left")," or ",f({},"slds-badge__icon_right")," to the wrapper for spacing the icon in relation to the text label."),(0,i.createElement)(c.A,null,(0,i.createElement)(s.A,null,(0,i.createElement)("strong",null,"Base: Icon on the left"),(0,i.createElement)(a.A,null,(0,m.NO)(g,"with-left-icon"))),(0,i.createElement)(s.A,null,(0,i.createElement)("strong",null,"Base: Icon on the right"),(0,i.createElement)(a.A,null,(0,m.NO)(g,"with-right-icon"))),(0,i.createElement)(s.A,null,(0,i.createElement)(a.A,null,(0,m.NO)(g,"light-with-left-icon"))),(0,i.createElement)(s.A,null,(0,i.createElement)(a.A,null,(0,m.NO)(g,"light-with-right-icon")))),v({},"When using inverse themed badges, add the ",f({},"slds-badge__icon_inverse")," class to ",f({},"slds-badge__icon")," to inverse the icon."),(0,i.createElement)(c.A,null,(0,i.createElement)(s.A,null,(0,i.createElement)("strong",null,"Icon on the left"),(0,i.createElement)(a.A,null,(0,m.NO)(g,"inverse-with-left-icon"))),(0,i.createElement)(s.A,null,(0,i.createElement)("strong",null,"Icon on the right"),(0,i.createElement)(a.A,null,(0,m.NO)(g,"inverse-with-right-icon")))),E({id:"Badges-with-Nested-Elements"},"Badges with Nested Elements"),v({},"Along with icons, you can have nested textual elements, such as ",f({},"strong"),", ",f({},"em"),", and ",f({},"span")," elements, within a badge. Only ",f({},"inline")," and ",f({},"inline-block")," elements are supported at this time."),(0,i.createElement)(o.A,{title:"Badge with nested element"},(0,i.createElement)(a.A,{toggleCode:!1},(0,i.createElement)(d.Ex,null,"Component In: ",(0,i.createElement)("em",null,"Lightning")))),E({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,i.createElement)(u.A,{name:"badges",type:"component"}))},S=function(){return(0,r.Qr)(A())}}},l={};function r(e){var t=l[e];if(void 0!==t)return t.exports;var n=l[e]={id:e,exports:{}};return i[e](n,n.exports,r),n.exports}r.m=i,r.amdO={},e=[],r.O=function(t,n,i,l){if(!n){var o=1/0;for(u=0;u<e.length;u++){n=e[u][0],i=e[u][1],l=e[u][2];for(var a=!0,s=0;s<n.length;s++)(!1&l||o>=l)&&Object.keys(r.O).every(function(e){return r.O[e](n[s])})?n.splice(s--,1):(a=!1,l<o&&(o=l));if(a){e.splice(u--,1);var c=i();void 0!==c&&(t=c)}}return t}l=l||0;for(var u=e.length;u>0&&e[u-1][2]>l;u--)e[u]=e[u-1];e[u]=[n,i,l]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},r.t=function(e,i){if(1&i&&(e=this(e)),8&i)return e;if("object"==typeof e&&e){if(4&i&&e.__esModule)return e;if(16&i&&"function"==typeof e.then)return e}var l=Object.create(null);r.r(l);var o={};t=t||[null,n({}),n([]),n(n)];for(var a=2&i&&e;("object"==typeof a||"function"==typeof a)&&!~t.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},r.d(l,o),l},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.e=function(){return Promise.resolve()},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.j=7295,function(){var e={7295:0};r.O.j=function(t){return 0===e[t]};var t=function(t,n){var i,l,o=n[0],a=n[1],s=n[2],c=0;if(o.some(function(t){return 0!==e[t]})){for(i in a)r.o(a,i)&&(r.m[i]=a[i]);if(s)var u=s(r)}for(t&&t(n);c<o.length;c++)l=o[c],r.o(e,l)&&e[l]&&e[l][0](),e[l]=0;return r.O(u)},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))}(),r.nc=void 0;var o=r.O(void 0,[3540],function(){return r(9279)});o=r.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/badges/docs.mdx.js"]=o}();