A basic badge is a read-only status or label. It is never clickable.
How to add it to a page. The file is components/css/badge.css.
Link the shared file once per page. Never copy the rules.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/badge.css">. Both templates already have it. |
| 2. Choose | Class badge-basic + a state + an emphasis. Add a size or upper case when you need it. |
| 3. Keep it a span | A badge is a <span>, never a link or a button. |
| Class | Use |
|---|---|
badge-basic | The badge. Medium by default. |
badge-basic--neutral-grey, --neutral-dark, --info, --success, --warning, --danger | State. One per badge. |
badge-basic--strong, --weak, --weaker | Emphasis. One per badge. |
badge-basic--large, --small | Size. Medium is the default. |
badge-basic--uppercase | Upper case, weight 600. |
badge-basic__icon | The icon (Material Symbols name as text, aria-hidden="true"), 14px. |
.badge is a different component.The component is one CSS file, shared by every page. Link it, never copy it.