text: "use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9131],{42045:function(e,a,t){t.r(a),t.d(a,{_frontmatter:function(){return g},default:function(){return c}});var s,i=t(63366),n=(t(67294),t(64983)),o=t(43086),b=["components"],g={},l=(s="Preview",function(e){return console.warn("Component "+s+" was not imported, exported, or provided by MDXProvider as global scope"),(0,n.kt)("div",e)}),d={_frontmatter:g},p=o.Z;function c(e){var a=e.components,t=(0,i.Z)(e,b);return(0,n.kt)(p,Object.assign({},d,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Badges contain short labels that help in ‘tagging’ entities. The container of a badge is rounded at the corners."),(0,n.kt)("br",null),(0,n.kt)("h4",{id:"types"},"Types"),(0,n.kt)("br",null),(0,n.kt)("h5",{id:"solid"},"Solid"),(0,n.kt)("p",null,"Solid badges are used to highlight important information on the page so that they can be recognized easily. They use solid color to easily pop out in a page."),(0,n.kt)(l,{name:"badge-solid-warning",mdxType:"Preview"}),(0,n.kt)("h5",{id:"subtle"},"Subtle"),(0,n.kt)("p",null,"Subtle badges are used when a lot of entities on a single page need tagging/labeling. In that case, using solid badges becomes a bit overwhelming e.g. tags in a list. This is why subtle badges use the lightest shade of the colors."),(0,n.kt)(l,{name:"badge-subtle-warning",mdxType:"Preview"}),(0,n.kt)("br",null),(0,n.kt)("h4",{id:"appearances"},"Appearances"),(0,n.kt)("p",null,"A badge comes in 9 appearances."),(0,n.kt)(l,{name:"appearance",mdxType:"Preview"}),(0,n.kt)("br",null),(0,n.kt)("h4",{id:"usage"},"Usage"),(0,n.kt)("br",null),(0,n.kt)("h5",{id:"spacing-between-badges"},"Spacing between badges"),(0,n.kt)("p",null,"Badges should maintain a ",(0,n.kt)("strong",{parentName:"p"},"minimum spacing of 8px")," from the content on either side."),(0,n.kt)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",(0,n.kt)("span",{parentName:"span",className:"gatsby-resp-image-background-image",style:{paddingBottom:"44.09722222222222%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABYlAAAWJQFJUiTwAAABZElEQVQoz32SwU7DMAyG+/5nuPIQ3IADdx4AmNiqbogt7dYkTexmbal/5G5FAyEqfXVT2X9+x8koxs9IhEhRiAhKjBGR+RRnQvi5/onMMVOxFFh6SmhigPceR2Yk59ClhL7vTwzDiXl9puu6GdF1Fpmkaxi9Izn2HVJKwDhiJMI4DBARfGochlOUEYBM/5XzM32IiGTp2OO9eMbj7Q2s89jtdijLCtZ7GGOQbzY43D+gurqGfbhDNAvYtydwmSMSo/F+6kqp6xoZcwuz/UC+eMF+v8d2u8XhcICzFt65KbH1HqmukZoGTAEUHFqKaNsW87kz80Smr6Io8PK6wHq9xmq1mpypaFmWsNZiZwyWeY5ivcHbcokm6AAI4Y9BZUQk6swYI+pGhaqqgnNuStAiRd2GpkGMAcwE/nb1y6EWee9FnaiIO7d5ubsWzMKKtqrD0/gbFZRzooR/7tql4Hxu33f2ouUvOnuvY3Y9RYkAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}}),"\n  ",(0,n.kt)("img",{parentName:"span",className:"gatsby-resp-image-image",alt:"Spacing between badges",title:"Spacing between badges",src:"/static/b84197d0b425d0aa0781c0f841e09541/3cbba/badges-1.png",srcSet:["/static/b84197d0b425d0aa0781c0f841e09541/7fc1e/badges-1.png 288w","/static/b84197d0b425d0aa0781c0f841e09541/a5df1/badges-1.png 576w","/static/b84197d0b425d0aa0781c0f841e09541/3cbba/badges-1.png 1152w","/static/b84197d0b425d0aa0781c0f841e09541/4c487/badges-1.png 1280w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"}),"\n    "),(0,n.kt)("br",null),(0,n.kt)("h5",{id:"badges-vs-pills"},"Badges vs Pills"),(0,n.kt)("p",null,"Badges are used for tagging entities while pills are used to display count of entities."),(0,n.kt)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",(0,n.kt)("span",{parentName:"span",className:"gatsby-resp-image-background-image",style:{paddingBottom:"38.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAABYlAAAWJQFJUiTwAAABGklEQVQoz12Q607DMAyF8/5vBxJIoAnEUNv0um65OslykNML3X58smWfHDsWH/IEqdpcXRvUV/lEg0p3mL4/Mby8Yv49w0kJ2zTPZFvXcH1vhXc+p5CQQkQMscQjXItEMNbCUgClBIrxkaWWORdEBCLKFAghBoSw4Jc6vPcovRCAFJDW/AF+zzrvszDGoqoqtG2LYRh2tNYF5xw/KObvtcGofKkbY6CUKnkZumqEtRrnny/UdQMpG3Rdh77vd7G1tmzB4rfKQM4OZjU8Dt0Nl+k+B75VXChf9n5nE+MekeK/7qDP2+mE1ibztGfocEMewJsqpff+9u2DvpiKaZowjmPmeLlcyv04boYMb3G73fYes+mZeZ7zepb7H7EYaWoERSyHAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}}),"\n  ",(0,n.kt)("img",{parentName:"span",className:"gatsby-resp-image-image",alt:"When to use badges vs pills",title:"When to use badges vs pills",src:"/static/b2fe4ad5ac784c2915bb4fbf41aa110e/3cbba/badges-2.png",srcSet:["/static/b2fe4ad5ac784c2915bb4fbf41aa110e/7fc1e/badges-2.png 288w","/static/b2fe4ad5ac784c2915bb4fbf41aa110e/a5df1/badges-2.png 576w","/static/b2fe4ad5ac784c2915bb4fbf41aa110e/3cbba/badges-2.png 1152w","/static/b2fe4ad5ac784c2915bb4fbf41aa110e/0b124/badges-2.png 1728w","/static/b2fe4ad5ac784c2915bb4fbf41aa110e/e957c/badges-2.png 1920w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"}),"\n    "))}c.isMDXComponent=!0}}]);
  //# sourceMappingURL=component---src-pages-components-badges-usage-mdx-e71ff56f3301f13865ac.js.map