Badge
Badges are used to help to label, categorize, or organize items using keywords or topics that describe them.
Last updated
Badges are used to help to label, categorize, or organize items using keywords or topics that describe them.
Last updated
Use badges to indicate notification counts, differentiate between states/statuses, indicate countries, etc.
✅ Use badges to present notification counts or to highlight certain details that may require attention/action from the user
✅ Use badges when content can have multiple states or categories, and the user needs a way to differentiate between them
✅ Single or multiple badges can be used at the same time to categorize content where appropriate
⛔ Don't use badges to represent filtering options, controls, or endpoints on the system (users, devices, numbers etc)
⛔ Badges are not interactive elements, meaning they can't be clicked, focused, or edited. They are purely presentational
The Badge component has four(4) roles that hold semantic meaning. Semantic role badges are typically used independently of each other and are most commonly used to represent certain states of elements within the UI.
Primary
Used to represent an action or state of an item that is currently active, in progress, or any other data that should to be highlighted using the primary brand color.
Success
Used to represent a status or outcome of an action that has been successful.
Warning
Used to represent a status or outcome of an action that may require the user's attention. Used to help direct the user's attention to potential issues or negative impacts.
Danger
Used to represent a status or outcome of an action that has incurred an error or failed. Used to help direct the user's attention to items or states that most likely require the user's action.
Along with semantic roles, there is a badge style for every secondary color available in Sipster's color package, as well as light and dark styles for basic contrast options. These hold inherent meaning within the system, so it is up to the designer to decide when and how to implement them.
Light
Dark
Indigo
Lime
Orange
Pink
Purple
Teal
Outside of the default badge component where it's just a text label with a background container, there exists three(3) additional badge variants:
Badge-HasIcon
Badge-Counter
The Badge-HasIcon badge variant includes an icon for scenarios where the additional visual cue can be helpful in conveying meaning to users. The icon should always be placed before the text label, never after.
The default badge style is comprised of a light background color + text label. This helps keep the visual impact of badge elements subtle when multiple badges exist in a given view or page.
However, the lighter background contrast does not work as well for notification or number count scenarios. For these instances, use the Badge-Counter badge variant to increase the visual contrast and impact of the badge. The Badge-Counter variant can be used in a variety of instances, and is most commonly used in context with other elements that it represents.
The Counter variant should not be used in conjunction with the HasIcon variant.
