Tag

Emphasis × size

data-emphasis high, medium and low, then without it, at each data-size.

Every size

xs to 2xl. Canon has three tag sizes: xs shows as sm, and xl and 2xl as lg.

Meaning: data-intent

Use data-intent when the color means something: a status. Statuses can look different from categories (here, rounder and in capitals), so the two are never confused. High, medium and low emphasis, then with a dot.

Identity: data-seed

Use data-seed when the color only tells tags apart: categories, labels, people. Pass a stable number (an id); it always picks the same color, the same one an avatar with that seed gets. High, medium and low emphasis.

Same seed, avatar and tag

Not an integer

Seeds are integers. Anything else, like data-seed="abc", gives the neutral color.

Content

Everything at once

Avatar, leading icon, dot, label, trailing icon and key, in that order. High, medium and low emphasis.

AL Label ⌘K AL Label ⌘K AL Label ⌘K

AL Label ⌘K AL Label ⌘K AL Label ⌘K

AL Label ⌘K AL Label ⌘K AL Label ⌘K

One at a time

Approved Design Active Draft ALAda Lovelace GHGrace Hopper Search⌘K

Icon only

With data-display="icon" the label is hidden but still read by screen readers, and the tag becomes square.

Starred Starred Starred Pinned ALAda Lovelace

Removable

A <button type="button" class="canon-tag-remove"> last, named after the tag ("Remove Design"). Removing the tag is up to your app; a Combobox with several values makes these for you.

Option 1 Design Done ALAda Lovelace

In context

A list of tags

Several tags are a <ul>, one per <li>.

• Accessibility
• CSS
• Design systems
• Forms

In running text

The request is Pending until a reviewer from Design approves it.

Larger text, larger tags: Approved by ALAda Lovelace

On other surfaces

Neutral tags take their colors from the text around them, so they stay visible on gray and dark panels.

Edge cases

Right-to-left

In right-to-left text the avatar and leading icon move to the right; the key still reads left to right.

AL Label ⌘K تمت الموافقة قيد الانتظار

Long labels in a narrow container

When space runs out the label is cut short with an ellipsis; icons, dot, avatar and key stay whole.

An exceptionally long category name Overdue since last Tuesday afternoon Open the command palette⇧⌘P ALAda Augusta King, Countess of Lovelace

Rows that wrap