Use cases
- Module state — "Module enabled" / "No module" next to a permission row.
- Permission state — "Permission set" / "No permission" inside the role editor.
- Inline labels wherever an icon + short tone label scans faster than a plain badge.
When NOT to use
- For a counter overlay on an icon (bell, inbox) → use NotificationBadge.
- For a generic tag pill with no semantic state → use Badge.
- For longer-form messages → use Alert or a status banner.
Tones
| Tone | Meaning |
|---|---|
success | A positive state — module enabled, permission set, available. |
warning | Configuration is incomplete — "No module" / "No permission". |
danger | A blocking error or revocation. |
info | Neutral metadata — "Beta", "New", "In review". |
neutral | Default catch-all. Quiet contrast. |
Composition
- The
iconslot accepts any 12 × 12 SVG. Stroke colour inheritscurrentColor, so you don't recolour the SVG yourself — the tone class does it. - Keep the label to 1–3 words. Longer copy belongs in an Alert or a tooltip.
Related
- Badge — generic tag pill without semantic tones.
- NotificationBadge — counter overlay on icons.
- Alert — longer-form status messages with title and description.