Badge
A badge for indicating things
Variants
Basic badge badge
-
<span class="badge">basic badge</span> <span class="badge badge--success">success badge</span> <span class="badge badge--warning">warning badge</span> <span class="badge badge--error">error badge</span> <span class="badge badge--cases">cases badge</span> <span class="badge badge--intakes">intakes badge</span>
Usage
When to use
A badge can be used to indicate state, status, etc. Use it in proximity to the item for which it indicates a state.
| Class Name | Description |
|---|---|
badge
|
The base class for creating a badge |
badge--success
|
A badge indicating a success status. This can be used to indicate nominal statuses. |
badge--warning
|
A badge indicating a warning status. This can be used to indicate low-priority warnings. |
badge--error
|
A badge indicating an error status. This can be used to indicate high-priority warnings or errors. |
badge--cases
|
Used to indicate that an item relates to Cases |
badge--intakes
|
Used to indicate that an item relates to Intakes |