role presentation
Badge draft v0.1.0
A short piece of text that qualifies the item next to it: a status, a count, a category.
A badge is a small, read-only label attached to something else: the status of an order (Shipped), the number of unread messages, a category tag. It is text with a tinted or filled background; its intent gives the tint a meaning (success, warning, error, info), its emphasis how loud it is. A badge is never interactive: a removable tag or a filter is a different component.
States matrix
Every option of each styling property against every declared state, per part when states belong to parts. Properties whose options combine in one component token path are crossed: one table per combination of the others. States are forced with data-state, so what you see is exactly what the CSS defines, independent of the pointer. A column header names the inputs or platforms a state belongs to; states without a web rendering are listed under the table.
By emphasis × intent
intent = neutral
| Emphasis | default |
|---|---|
subtle |
Draft
|
accent |
Draft
|
intent = brand
| Emphasis | default |
|---|---|
subtle |
Draft
|
accent |
Draft
|
intent = success
| Emphasis | default |
|---|---|
subtle |
Draft
|
accent |
Draft
|
intent = warning
| Emphasis | default |
|---|---|
subtle |
Draft
|
accent |
Draft
|
intent = error
| Emphasis | default |
|---|---|
subtle |
Draft
|
accent |
Draft
|
intent = info
| Emphasis | default |
|---|---|
subtle |
Draft
|
accent |
Draft
|
By size
| Size | default |
|---|---|
small |
Draft
|
medium |
Draft
|