Intro

A tag provides additional information about an object, such as a number or a KPI (Key Performance Indicator). It directs the user’s attention to specific details like state, quantity, or condition and can include both icons and text.

Tag examples

When to Use

Do

Use the tag:

  • To display complementary information for an object, such as a number or a KPI.
  • To show certain information (such as a category or status) in a compact form.

Don't

Don’t use the tag:

  • To represent tokens in the input component.
  • To represent a badge for a button.
  • Avoid adding too much text to a tag.
  • Don't use single letters or numbers on a tag (minimum width applies).
  • Use only one icon in an icon-only design.
  • Don’t overuse tags on pages.

Anatomy

Tag anatomy

  1. Background: Different background colors allow customization or semantic coloring.
  2. Text/Icon: Describes or visualizes the information displayed. You can show both an icon and text, only an icon, or only text.

Types

Size and Semantic Meaning

The tag component offers a range of visualizations to cover different use cases, including small/large sizes and value states. Small is the default size, and is often used in tables and lists to indicate a general status. Large is typically used in object headers.

Tag sizing and semantic meaning

Variants

The tag can contain only an icon, only text, or both an icon and text.

Tag variants

Behavior and Interaction

States

The tag component has an “Active” state that should only be used to display additional information (typically in a popover) using the progressive disclosure technique.

Responsiveness

Text in a tag can be wrapped by word or truncated with the ellipses. For more information, see Wrapping and Truncation.

Guidelines

Implementation

  • Tag (SAP Web Components)

Specifications

  • Tag (visual design specification)
  • Tag (IxD specification)

Guidelines

Implementation

  • Tag (SAP Web Components)