Badges
Small pieces of information
Badges help provide a quicker overview in a complex information structure by colour coding and separation from the surrounding text. Useful for short, but essential, pieces of information that the user might be scanning for, like status codes or tabular data that differ between rows.
| Classes | Example | Meaning and usage |
|---|---|---|
| mb-badge | Optional | Base type. Neutral. |
| mb-badge mb-badge--blue | Active | Neutral active state. Can work as a way to alternate the base type without implying too much meaning |
| mb-badge mb-badge--green | Done | Approved, working. Positive status but can also work as a way to alternate the base type without implying too much meaning. |
| mb-badge mb-badge--yellow | Processing | Intermediate stage or status. Warning but not error. |
| mb-badge mb-badge--red | Required | Important, attention, deviation, error. Not limited to negative connotations, also works as a good contrast to the base type. |