Use a badge to provide extra information or context about an item
Badges can also be used to tag content and show it belongs to a specific category
The are 5 badge variations
1. Neutral
2. Success
3. Info
4. Warning
5. Error
Usage
Use a badge on it's own to indicate if a piece of content is 'new' or to show a category on an article.
Use badges to indicate that something can have more than one status. (for example to show whether an item in a table has been completed).
Don't use a badge to describe multiple elements or categories.
Don't use a badge as a small button. Badges are not interactive.
Writing a badge label
-
This should be supporting information, not primary. Keep it short.
-
Badges are themed semantically in consumer products:
Neutral, info, success, warning, error.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
v3.1.0+ |
|
App (@ovotech/element-native) |
v3.1.0+ |
Related
External links