Skip to content

Label

A Label is a small, non-interactive visual element used to categorise content or provide quick technical information, such as a vehicle’s powertrain (“Hybrid”, “Plug-in”, “Electric”). It can be configured with or without an icon depending on the context and the space available.

Quarantine

DesignDevelopAccessibility

A Label is a small, non-interactive visual element used to categorise content or surface quick technical information. It reads at a glance, helping people scan a list and tell product types or states apart. Use it with or without an icon depending on the context and the space available.

Anatomy

Section titled “Anatomy”
Hybrid
  1. Label
  2. Icon
  3. Text

When to use it

Section titled “When to use it”

Use a Label when:

  • You need to display a technical spec, such as a vehicle feature (“Hybrid”, “Plug-in”, “Electric”).
  • You want to show the current state of a system or service.
  • You want to help people scan a list and tell product types apart quickly.

Avoid a Label when:

  • You want the user to click it — use a Button or a Chip instead.
  • You need to show sentences or long descriptions — use standard body text.
  • You need a high-priority warning — use an Alert or notification that demands more visual attention.

Pair two Labels — a double label — when:

  • The two values belong together and read as one, such as dual specifications (“Hybrid | Plug-in Hybrid”).
  • You’re showing comparative data — a before/after or two complementary states.
  • A single Label can’t capture the technical detail on its own.

Split the pair with a vertical divider. When the two pieces of information aren’t directly related, keep them as two separate Labels instead — grouping unrelated values behind one divider implies a relationship that isn’t there.

Properties

Section titled “Properties”

Colour

Neutral (black) by default. The green, blue, and red variants map to the success, info, and error foreground tokens and signal a category or state. Always pair colour with text and, where helpful, an icon — never rely on colour alone.

Icon

Optional. A decorative icon placed before the text reinforces the meaning (for example a powertrain glyph). When space is tight, drop the icon and keep the text.

Size

Two sizes — small (default) for dense layouts and lists, and large for more prominent placements. Both share the same colours and behaviour.

Style

Sentence case by default; an uppercase style is available for emphatic, tag-like treatments.

Best practices

Section titled “Best practices”

Do

Keep copy to 1–3 words, pair colour with text (and an icon when it adds meaning), and use a consistent colour for the same category across a view.

Don't

Don’t make labels clickable, don’t use them for long text or critical alerts, and don’t rely on colour alone to carry the meaning.

Content guidelines

Section titled “Content guidelines”
  • Be concise. Use 1–3 words. Labels are made for quick scanning, not for reading sentences.
  • Keep a parallel form. Use the same grammatical form across a set — all nouns or all verbs.
  • No punctuation. Never end a label with a period or use commas within it.