'%3e%3cpath%20d='M19%2028.5C19%2025.9804%2020.0009%2023.5641%2021.7825%2021.7825C23.5641%2020.0009%2025.9804%2019%2028.5%2019C31.0196%2019%2033.4359%2020.0009%2035.2175%2021.7825C36.9991%2023.5641%2038%2025.9804%2038%2028.5C38%2031.0196%2036.9991%2033.4359%2035.2175%2035.2175C33.4359%2036.9991%2031.0196%2038%2028.5%2038C25.9804%2038%2023.5641%2036.9991%2021.7825%2035.2175C20.0009%2033.4359%2019%2031.0196%2019%2028.5Z'%20fill='%231ABCFE'/%3e%3cpath%20d='M0%2047.5C0%2044.9804%201.00089%2042.5641%202.78249%2040.7825C4.56408%2039.0009%206.98044%2038%209.5%2038H19V47.5C19%2050.0196%2017.9991%2052.4359%2016.2175%2054.2175C14.4359%2055.9991%2012.0196%2057%209.5%2057C6.98044%2057%204.56408%2055.9991%202.78249%2054.2175C1.00089%2052.4359%200%2050.0196%200%2047.5H0Z'%20fill='%230ACF83'/%3e%3cpath%20d='M19%200V19H28.5C31.0196%2019%2033.4359%2017.9991%2035.2175%2016.2175C36.9991%2014.4359%2038%2012.0196%2038%209.5C38%206.98044%2036.9991%204.56408%2035.2175%202.78249C33.4359%201.00089%2031.0196%200%2028.5%200L19%200Z'%20fill='%23FF7262'/%3e%3cpath%20d='M0%209.5C0%2012.0196%201.00089%2014.4359%202.78249%2016.2175C4.56408%2017.9991%206.98044%2019%209.5%2019H19V0H9.5C6.98044%200%204.56408%201.00089%202.78249%202.78249C1.00089%204.56408%200%206.98044%200%209.5H0Z'%20fill='%23F24E1E'/%3e%3cpath%20d='M0%2028.5C0%2031.0196%201.00089%2033.4359%202.78249%2035.2175C4.56408%2036.9991%206.98044%2038%209.5%2038H19V19H9.5C6.98044%2019%204.56408%2020.0009%202.78249%2021.7825C1.00089%2023.5641%200%2025.9804%200%2028.5H0Z'%20fill='%23A259FF'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1_137'%3e%3crect%20width='38'%20height='57'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=icon}
Badges are read-only indicators used to communicate a category, metadata, a numeric quantity, or a process's current state.
Importing
The component can be imported via:
Usage
Colors
The Badge component accepts a range of colors via the color prop, the default being neutral. The neutral, accent, neutral-outline, and accent-outline colors render as a fully-rounded pill — use them for numeric quantities such as counts. The red–grey colors render in a squarer shape — use them to communicate a category, metadata, or status:
Semantic colors
When the color conveys meaning, use the semantic values critical, caution, success, and information — they render identically to red, yellow, green, and blue, but keep the intent readable at the call site. Use the raw colors for purely decorative categorization:
Status indicator
For the semantic colors and the red, yellow, green, blue, purple, and grey colors, the Badge can show a status indicator dot via the showStatusIndicator prop. Use it for operational status that describes where something is in its lifecycle. Prefer a semantic color with the indicator when the status dot implies the color carries meaning that aligns with the semantics:
Bold
Badge text renders in a bold font weight by default. Set bold={false} for a less visually prominent badge. Light text is not compatible with status indicators:
Deprecated variations
API
Default:true
Whether the badge should render in a bold font weight
Default:neutral
The visual style of the badge.
The red–grey colors render in the squarer shape of the (deprecated) Label component;
neutral, accent and the outline colors render as a fully-rounded pill.
The semantic values critical, caution, success, and information render identically to
red, yellow, green, and blue — use them when the color conveys meaning.
Note: When using status indicators, only the semantic values and the red, yellow, green, blue,
purple, and grey colors are supported.
Use color="accent" instead (or color="accent-outline" when combined with isOutline)
Whether the badge should render in "emphasis" variant
Use color="neutral-outline" instead (or color="accent-outline" when combined with isEmphasized)
Whether the badge should render in the "outlined" variant
Default:false
Whether the badge should show a status indicator colored dot