Badge
A small label for a status, a category or a version.
Edit page
Example
v0.1HiredOfferInterviewScreeningNew
<span className='badge'>v0.1</span>
<span className='badge green'>Hired</span>
<span className='badge blue'>Offer</span>Like the alert, a colour variant is mixed with the page, so it works in both modes.
Variables
| Variable | Default | What it sets |
|---|---|---|
$badge-height | 24px | height |
$badge-padding | 0 8px | inner padding |
$badge-radius | 6px | corner radius |
$badge-tint | 12% | share of the colour in the background |
$badge-edge | 32% | share of the colour in the border |