Spectrum
Badge
Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user's attention.
Table of contents#
Anatomy#
Options#
Label#
Badges should always have a label for accessibility and clear comprehension. When the label is not defined, a badge becomes icon-only.
Icon#
A badge can have an optional icon. If no label is used, a badge becomes icon-only and it must include an icon. An icon-only badge is best for very small spaces, and it should always include a tooltip on hover to provide more context for the icon's meaning.
Size#
Badges come in four different sizes: small, medium, large, and extra-large. The small size is the default and most frequently used option. Use the other sizes sparingly to create a hierarchy of importance on a page.
Semantic variants#
When badges have a semantic meaning, they use semantic colors. Use these variants for the following statuses:
- Positive (e.g., approved, complete, success, new, purchased, licensed)
- Informative (e.g., active, in use, live, published)
- Negative (e.g., error, alert, rejected, failed)
- Neutral (e.g., archived, deleted, paused, draft, not started, ended)
Non-semantic variants#
When badges are for color-coded categories, they use label colors. Non-semantic variants are ideally used for when there are 8 categories or less.
Fixed#
Badges can be placed as floating in a container, or they can be fixed to any edge of a container. They lose their default corner rounding on the fixed edge.
Disabled#
A badge in a disabled state shows that it exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a badge may become available later. Badges should only be able to be disabled if they are interactive.
Table of options#
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.
| Property | Values | Default Value |
|---|---|---|
| label | text / nothing When the label is not defined, the badge appears as icon-only. | – |
| icon | icon / nothing Icon must be present if the label is not defined. | nothing |
| badge | neutral / info / positive / negative / indigo / yellow / magenta / fuchsia / purple / seafoam | neutral |
| fixed | none / top / right / bottom / left | none |
| is disabled | yes / no | no |
Behaviors#
Text overflow#
When a badge's label is too long for the available horizontal space, it wraps to form another line. If there is no room for a second line of text, the badge should truncate and include a tooltip to expose the full text upon hover.
Usage guidelines#
Avoid using a blue badge#
Blue badges are easily confused with Spectrum's blue call to action buttons. Only use blue badges when absolutely necessary.
Only use a yellow badge for discounts#
The yellow badge is reserved to communicate "best deal" or "discount" situations only. Do not use the yellow badge for other situations.
Don't display multiple badges#
Badges are meant to offer quick context about what category, status, or meaning an item is associated with. If your design requires multiple badges, consider using regular text metadata and reserve a single badge for only the most important status, category, or meaning instead.
Avoid using icon-only badges#
It's best to use a text label on a badge whenever possible because communicating with an icon alone may be unclear or subjective. Reserve icon-only badges for responsive cases, such as for cards in a panel that don't have space for a full badge. In related contexts, pair the icon with a label to help teach a user what the icon means. Icon-only badges should always include a tooltip on hover to show their associated label.
Badge placement#
Badge placement varies widely depending on the use case. In cards, place the badge on the left side of the footer, if possible. If there is no footer or if that space is filled, affix the badge to the right edge of the preview. If there is no preview, affix the badge to the top right corner of the card.
A badge should be placed in the footer, on the left side if possible.
A badge should only be fixed to the top right corner if there is no space for it in the footer.
Keyboard interactions#
| KEY | INTERACTION |
|---|---|
| Tab | Tabbing into an interactive badge places focus on the badge. Subsequent tabs move the focus to the next item. |
| Shift + Tab | Moves focus to the previous item. |
| Space or Enter | Filters results by the selected badge or performs the action associated with the badge. |
Changelog#
| Date | Number | Notes |
|---|---|---|
| Feb 26, 2020 | 1.0.0 |
|
Design checklist#
All interactive states
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Multiple options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
All color themes
Works properly across all four color themes (lightest, light, dark, darkest).
All platform scales
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Defined behaviors
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Usage guidelines
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Accessible contrast
Follows WCAG 2.0 standards for contrast (AA).
Internationalization guidelines
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Keyboard interactions
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Design tokens
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.
Generated UI kit
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
In Spectrum for Adobe XD plugin
Component is included in the Spectrum for Adobe XD plugin.
Tag