Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user's attention.
Badges should always have a label for accessibility and clear comprehension. When the label is not defined, a badge becomes icon-only.
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.
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.
When badges have a semantic meaning, they use semantic colors. Use these variants for the following statuses:
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.
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.
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.
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 |
size | small / medium / large / extra large | small |
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.
Blue badges are easily confused with Spectrum's blue call to action buttons. Only use blue badges when absolutely necessary.
The yellow badge is reserved to communicate "best deal" or "discount" situations only. Do not use the yellow badge for other situations.
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.
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 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.
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. |
Date | Number | Notes |
---|---|---|
Feb 26, 2020 | 1.0.0 |
|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
Component is included in the Spectrum for Adobe XD plugin.