Badge
Description
Badge is a visual component used to indicate the status of a feature or a product.
For example, you've added a new tab to the report. In this case, you can highlight the new feature in your product with the new
badge.
Main features of the component:
- Badge can't be deleted or added by a user. Badge is added to elements by the system according to the rules described in Types.
- Badge isn’t clickable.
- Don’t use badge for filtering data.
Appearance
Component has one size.
Types
Use the following badges in the products depending on the status of the feature or product:
Badge | Background | When used |
---|---|---|
Use it with features that are only available for users with admin rights. The functionality with admin badge isn’t visible to the other users. | ||
Use it with features which are available only to admins and a limited number of users who have been granted access as alpha users. The functionality under this badge should be used without any guarantees, it's unstable, and may be changed significantly over time or be disabled. | ||
Use only for unstable functionality of a feature or product. A product/feature with this badge was released to test the product hypothesis, and it can have major changes in the future. | ||
Use with products and features that are out of beta, and with new features that are available to all users. Use it to attract attention to a new product or feature. | ||
Use to promote products in the main navigation sidebar or other places. | ||
Can be placed on products and features that aren't yet available and are displayed for collecting feedback. |
Usage on dark/colored background
Any badge can be inverted like this:
Use --gray-white
color for the background and --text-primary
for the text color.
Feature status
The feature status can be shown inside most of the components and controls.
Button
Pills
Notification
Badge vs. Tag
Don’t confuse Tag and Badge components. Tag is used for thematic grouping and labeling data, while the Badge indicates the status of a feature or product.
Placement
Badge is usually placed to the right of the element. As an exception, in the Notice component, badge is positioned to the left relative to the text. Badge's margins are always multiples of 4.
Usage in UX/UI
Component/block | Appearance example |
---|---|
Product header | |
Landing page header | ![]() |
Widget | ![]() |