Component
Badge
A small pill in any of the eight colors.
Classes
| Class | Type | |
|---|---|---|
| badge | Component | The pill. |
| badge-sm | Size | Small. |
| badge-lg | Size | Large. |
| primary | Color | Indigo by default. Used when you set no color. |
| secondary | Color | Pink by default. |
| tertiary | Color | Teal by default. |
| neutral | Color | Gray by default. |
| success | Color | Green by default. |
| error | Color | Red by default. |
| warning | Color | Amber by default. |
| info | Color | Sky by default. |
Colors
PrimarySecondaryTertiaryNeutralSuccessErrorWarningInfo
<span class="badge primary">Primary</span>
<span class="badge secondary">Secondary</span>
<span class="badge tertiary">Tertiary</span>
<span class="badge neutral">Neutral</span>
<span class="badge success">Success</span>
<span class="badge error">Error</span>
<span class="badge warning">Warning</span>
<span class="badge info">Info</span>Sizes
SmallRegularLarge
<span class="badge badge-sm">Small</span>
<span class="badge">Regular</span>
<span class="badge badge-lg">Large</span>A badge uses the small drop shadow, the same step as a mark or a slider handle.