Badge

Version 5.0.0

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.
DateVersionSpectrumExpress UI KitDec 15, 20225.0.0DownloadDownloadApr 06, 20224.0.0DownloadDownloadJan 20, 20223.0.1DownloadFeb 26, 20203.0.0Download

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 notice-colored orange badge with the label "request", fifth 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 14 badges using non-semantic colors to help categorize. Gray badge, label photography. Red badge, label Graphic design. Orange badge, label Illustration. Yellow badge, label Best value. Chartreuse badge, label Video editing. Celery badge, label Digital painting. Green badge, label Animation. Seafoam badge, label Beta. Cyan badge, label Digital marketing. Blue badge, Social media. Indigo badge, label New. Purple badge, label Scheduled. Fuchsia badge, label Beginner. Magenta badge, label Trial.

Non-semantic variants#

When badges are for color-coded categories, they use non-semantic 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.

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 Valuelabeltext / nothing
When the label is not defined, the badge appears as icon-only.
–iconicon / nothing
Icon must be present if the label is not defined.
nothingvariantpositive / informative / negative / notice / neutral / gray / red / orange / yellow / chartreuse / celery / green / seafoam / cyan / blue / indigo / purple / fuchsia / magentaneutralfixednone / top / right / bottom / leftnonesizesmall / medium / large / extra largesmall

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 accent buttons. Only use blue badges when absolutely necessary.

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

do
Key example of correct way to use a yellow badge, which should only be used for communicating about discounted items. Label, "Best value."
dont
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.

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

do
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."
dont
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.

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

dont
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#

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

Theming#

A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes. For more information, view Theming.

Key example of badges in the Spectrum for Adobe Express theme. Positive badge with checkmark icon, label Licensed. Neutral badge, label Archived.

Spectrum for Adobe Express#

Badges in Spectrum for Adobe Express have more rounding and higher contrast.

Changelog#

DateNumberNotesDec 15, 20225.0.0
  • Added new additional variants (notice, gray, green, blue, red, cyan)
  • Updated background colors
  • Removed disabled state (badges are not interactive)
  • Migrated to latest token system
Apr 06, 20224.0.0
  • Updated all colors to 6.0.0
Jan 20, 20223.0.1
  • Updated positive (green) and seafoam colors for increased contrast
Feb 26, 20203.0.0
  • This component has been added to the website
  • Added size option

Design checklist#

N/A

All interactive states

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

check

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

check

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

check

Accessible use of color

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

check

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

unchecked

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

check

Content design

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

check

Defined options

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

check

Defined behaviors

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

check

Usage guidelines

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

unchecked

Writing guidelines

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

unchecked

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

check

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

check

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

check

UI kit

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

check

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.

unchecked

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.