Adobe Logo

Spectrum

Version 1.0.0

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.

Small-size badges shown in all the color options including gray, green, seafoam, blue, indigo, purple, fuchsia, magenta, red, and yellow.

Table of contents#

Anatomy#

Image illustrating through labels the component parts of a badge, including the label and icon.

Options#

Key example of two badges with and without labels. One with a check icon and "licensed" as its label, and one with only an icon.

Label#

Badges should always have a label for accessibility and clear comprehension. When the label is not defined, a badge becomes icon-only.

Key example of two badges with and without icons. One with a check icon and "licensed" as its label, and one with only "licensed" as its label.

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.

Key example four green badges showing the size options available including small, medium, large, and extra-large.

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.

Key examples of badges using semantic colors to help convey meaning. The first example is a positive-colored green badge with the label "approved", second is an informative-colored blue badge with the label "active", third is a negative-colored red badge with the label "rejected", fourth is a neutral-colored gray badge with the label "archived".

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)
Key examples of badges using non-semantic colors to help categorize. The first example is a seafoam badge with the label "beta", second is an indigo badge with the label "advanced", third is a purple badge with the label "scheduled", fourth is a fuchsia badge with the label "beginner", fifth is a magenta badge with the label "trial", and last is a yellow badge with the label "best deal".

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.

Key examples of placement options for badges. First example of a badge is not fixed to an edge and floats inside the item. Second badge example is fixed to the top edge of the item, toward the right side. Third badge example is fixed to the right edge of the item, toward the bottom side. Fourth badge example is fixed to the bottom edge of the item, toward the right side. Last badge example is fixed to the left edge of the item, toward the bottom side.

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.

Key example of a badge in a disabled and non-interactive state, label "licensed."

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.

PropertyValuesDefault 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
variant
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

Behaviors#

Key example of a badge where the label wraps to a second line. Text is left aligned. Label reads "24 days left in trial."

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.

Key example of a blue badge showing how it can easily be confused with Spectrum's buttons. Label, "Licensed."

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.

Key example of correct way to use a yellow badge, which should only be used for communicating about discounted items. Label, "Best value."
Key example of incorrect way to use a yellow badge, which should only be used for communicating about discounted items. Label, "Beginner."

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.

Key example of an item that has been incorrectly assigned multiple badges. Labels, "New," "Advanced," "Recommended."

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.

Key example of two badges showing the preferred options for badges, either a badge with an icon and a label, or just a label. Both labels read, "Licensed."
Key example of a badge with only a checkmark icon, the meaning of which can be confusing to users.

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.

Key example of a badge correctly being placed in the bottom left side of a card footer.

A badge should be placed in the footer, on the left side if possible.

Key example of a badge incorrectly being affixed to the top edge of a card when there is plenty of space in the footer for the badge to appear.

A badge should only be fixed to the top right corner if there is no space for it in the footer.

Keyboard interactions#

KeyInteraction
TabTabbing into an interactive badge places focus on the badge. Subsequent tabs move the focus to the next item.
Shift + TabMoves focus to the previous item.
Space or EnterFilters results by the selected badge or performs the action associated with the badge.

Changelog#

DateNumberNotes
Feb 26, 20201.0.0
  • This component has been added to the website

Design checklist#

N/A

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

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).

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Content design

UI language and information design considerations have been incorporated into component design.

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

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 available as design tokens.

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.