Badge
Badges are used to highlight a relevant piece of information, like status or category.
ReactreleasedVuereleasedElementsreleasedAndroidreleasediOSreleased
Badges are small, contextual elements used to display concise, informative labels. They highlight relevant information such as statuses, categories, counts, roles, or activity indicators, helping users quickly identify and differentiate items at a glance.
Visually styled and colour-coded to indicate contextual metadata.
Related components: Pill
Example
Variants
Neutral
The neutral badge shows subtle or non-urgent information. It's used for general statuses or relevant information that don't require immediate attention.
Info
The info badge shows normal and informative details or context. It's used to highlight key aspects or provide additional context.
Positive
The positive badge is used to indicate a successful action or the completion of a task. It uses the green semantic colour, universally associated with success or positive connotations.
Warning
The warning badge highlights cautionary or advisory information with the intention of drawing more attention than the other variants, but are not yet critical or destructive.
Negative
The negative badge indicates critical or destructive information that requires immediate attention.
Sponsored
The sponsored badge is used to indicate that a particular ad appears at the top of a list due to plaid placement by the seller. This variant is reserved exclusively for this use case and should not be used in any other context.
Price
The primary purpose of the price badge is to display prices across user journeys. However, this variant can also be used in cases where it needs to stand out prominently on the screen. It features a darker background, creating stronger contrast with the content behind it. While the variant is currently named “price,” its applications extend beyond pricing alone, so the description should reflect its broader use cases.
Disabled
The disabled badge indicates an inactive state. It should be used when a feature or item exists but is not currently active—for example, when a user has created a draft ad that hasn't been published or made publicly visible. This badge helps communicate that the item is present but not in effect, and no immediate action can be taken.
Anatomy
1. Container
2. Leading icon (optional): Visual indicator that reinforces the badge's label.
3. Label: Communicates what is being highlighted.
Questions?
Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system