Badge

Approved — Ready for dev

The badge is an informative supplemental UI element meant to increase the emphasis of another UI element while providing additional information. A badge may either be Minimal, Numeric, or Descriptive. Badges are not interactive but can be appended to interactive UI elements.

Badge

Anatomy

A badge is a relatively simple UI element, always consisting of a container and often containing a label. 

External stroke

The external stroke may be turned on to create visual clarity when an appended badge overlaps the attaching object in an unpleasant way. Whenever the optional external stroke is used, its color must be set to match the background color beneath the badge. For the examples below, we show a stroke color that does not match the background color so you can see it, but the stroke should always appear as an “invisible” gap between the badge and the appending object.

Minimal

  1. Container
  2. External 2px stroke (optional)

The minimal badge is simply a filled circle that adds emphasis or creates a sense of urgency. This should be used when numeric or descriptive information may be excessive or unnecessary. Whenever the attaching object is 16px or smaller, only a minimal badge may be appended to it.

Numeric

  1. Container 
  2. Label - Overline
  3. Max character identifier - Overline (optional)
  4. External 2px stroke (optional)

A numeric badge may be used to indicate the number of items that exist under a selection. The max character identifier should be used whenever the numeric value exceeds 3 digits. The max character identifier is a “+” character set in Overline, with the spacing offset to vertically center the glyph.

Descriptive

  1. Container
  2. Leading 16px icon (optional)
  3. Label - Overline
  4. External 2px stroke (optional)

Descriptive badges may be used to provide supplemental information within a view. These are used to describe the status of an item, often utilizing the branded status messaging colors.

Specs

Color

By default, badges should appear using the branded guidance style. Badges may also utilize any of the following patterns when a branded status message color makes more sense, or variation is needed. Because badges are not interactive, the badge container and internal content should never use the branded affordance colors.

Color - Guidance

Element Property Value
Container Background color ∆colorBrandedGuidance
Leading icon Color ∆colorBrandedGuidanceOn
Label Overline Color ∆colorBrandedGuidanceOn
Max character identifier Color ∆colorBrandedGuidanceOn
External 2px stroke Stroke color Defined at implementation

Color - Error

Because the branded error color is usually red, this will be a common choice for badges. Please note, the badge does not have to describe an error to use this color.

Element Property Value
Container Background color ∆colorBrandedError
Leading icon Color ∆colorBrandedErrorOnColor
Label Overline Color ∆colorBrandedErrorOnColor
Max character identifier Color ∆colorBrandedErrorOnColor
External 2px stroke Stroke color Defined at implementation

Color - Success

Element Property Value
Container Background color ∆colorBrandedSuccess
Leading icon Color ∆colorBrandedSuccessOnColor
Label Overline Color ∆colorBrandedSuccessOnColor
Max character identifier Color ∆colorBrandedSuccessOnColor
External 2px stroke Stroke color Defined at implementation

Color - Info

Element Property Value
Container Background color ∆colorBrandedInfo
Leading icon Color ∆colorBrandedInfoOnColor
Label Overline Color ∆colorBrandedInfoOnColor
Max character identifier Color ∆colorBrandedInfoOnColor
External 2px stroke Stroke color Defined at implementation

Color - Caution

Element Property Value
Container Background color ∆colorBrandedCaution
Leading icon Color ∆colorBrandedCautionOnColor
Label Overline Color ∆colorBrandedCautionOnColor
Max character identifier Color ∆colorBrandedCautionOnColor
External 2px stroke Stroke color Defined at implementation

Color - Bulletin

Element Property Value
Container Background color ∆colorBrandedBulletin
Leading icon Color ∆colorPlatformWhite
Label Overline Color ∆colorPlatformWhite
Max character identifier Color ∆colorPlatformWhite
External 2px stroke Stroke color Defined at implementation

Elevation

The badge container should never be displayed as a raised surface. Whenever the badge is appended to another UI element (see Placement below), it should appear on top of the attaching element.  

Spacing - Minimal

Spacing - Numeric

The numeric badge has a minimum width and fixed height of ∆platformSpacingSmall. All content is vertically centered within the container.

Spacing - Descriptive

The numeric badge has a fixed height of ∆platformSpacingBase. All content is vertically centered within the container.

Spacing - Appended badges

When a badge is appended to another UI element, its vertical center should be aligned with the top edge of the attaching element’s container. The badge should be set with ∆platformSpacingNano inset from the right edge.

Shape

Specs - Shape
Element Property Value
Minimal container Border radius ∆platformSpacingTiny
Numeric container Border radius ∆platformSpacingTiny
Descriptive container Border radius ∆platformSpacingTiny

States

Badges are not interactive and therefore require no considerations for states.


Theming

No additional theming considerations for this component.

Placement

Badges may either be appended to UI elements or set adjacent to the objects they describe.

Appended

Appended badges are used to add additional emphasis to a particular atom or organism by attaching the badge to the top right corner of the object. Whenever the attaching object is 16px or smaller, you may only append a minimal badge to it.

Adjacent

Badges may be placed in close proximity to the objects they describe. Whenever a descriptive badge appears as a repeated value within a table, it may be placed in its own cell, but always in the same row as the item it describes.

Behavior

Badges are not interactive and therefore require no considerations for behavior.


Developer Docs

Vue Developer Docs

Component documentation coming soon!