Overview
Badges are used to display a status or count next to a specific feature or functionality. See also feedback indicator badges.
Usage
- Use to indicate the status of a feature, e.g., “beta”
- Use the custom “new” type for any new features
- Don't use the new badge for any other meaning
Beta and New duration rules
Since a feature can’t be new or in beta forever, these types of badges should show for 2 releases (~2 months). If a user hasn’t triggered any type of popup containing such badges during those 2 releases, the visibility should be extended to 1 additional release (max. 3 releases) to give them a final opportunity to notice it.
The badge should disappear if a user interacts with the feature (selects it), or if the feature has been out for 2 releases, as per above. However, in the event that a user does not see it until a 3rd release, it should then disappear at the end of that release.
If a user skips a few browser versions, they should only see badges of new/beta features from the last 3 releases; we get rid of any older badges so that users don’t get flooded.
Examples
For indicating that a feature is still in beta. Below an example of the Translations feature pop up being marked as in beta.
For highlighting new features. Below, an example of a context menu with an item labeled as new.
Design properties
See Storybook for code.
| Property | Values | Default |
|---|---|---|
| Type Variant | Default | New | Default |
| Show icon Boolean | true | false | false |
| Icon InstanceSwap | ||
| Disabled Variant | False | True | False |
Types
Default
The default badge component.
New
A green-colored badge to represent “new” features only.
Variants
Icon
An optional 12×12 icon ahead of the label.
States
Disabled
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
July 31, 2025 |
1.0.0 |
First release of Badge component documentation. |