StartFoundationsComponentsContent
Overview
Button Icon button Split button Button group Toggle button Toggle button group
Badge Banner Empty state Progress bar Progress ring Section message Skeleton Spinner Toast
Field Input Textarea Number input Number stepper Search field OTP input Phone input Checkbox Radio group Switch Slider Selection card Inline edit
Select family Select Combobox Multiselect Country select Date picker Date range picker Time picker Calendar Emoji picker
Dialog Sheet Popover Menu Tooltip
Sidebar Navigation menu Tab bar Segmented control Breadcrumb Pagination Tree
Table Data table Avatar Avatar group Tag Icon Image
Text Prose Link Code block Kbd
Accordion Collapsible Divider Scroll area Splitter Aspect ratio
Page header

Tag

A tag labels something with a category. It can also be removed, selected, or followed as a link. Some systems call it a chip.

Stable Figma
OverviewUsageAPIAccessibility
Research Hiking Design
<tk-tag color="purple">Research</tk-tag>
<tk-tag color="teal">Hiking</tk-tag>
<tk-tag color="blue">Design</tk-tag>

Anatomy

Part What it is
tk-tag the pill, 24px tall
default slot the label, 1 to 3 words; it names everything the tag does
leading slot an optional icon or avatar, hidden from screen readers
remove button the ✕ of a removable tag
state mark the + or ✓ of a selectable tag

Kinds

Static Status: open Hiking design
<tk-tag color="blue">Static</tk-tag>
<tk-tag color="blue" removable>Status: open</tk-tag>
<tk-tag color="teal" selectable selected>Hiking</tk-tag>
<tk-tag color="pink" href="/tags/design">design</tk-tag>

Give each tag one job. If you set more than one kind, removable wins over selectable, and selectable wins over href.

  • Static (default): a label. It takes no focus.
  • removable: a ✕ button that fires tk-remove. The tag doesn't remove itself: your handler removes it and moves focus.
  • selectable: the whole tag is a toggle that shows + when off and ✓ when on. Use it for filter bars and pick lists. It fires change when the user toggles it, not when your code sets selected.
  • href: the whole tag is a link with an underlined label. Use it where tags are usually links, such as "all posts with this tag", not for main navigation. target="_blank" adds rel="noreferrer noopener".

Colors

Red Orange Green Indigo Gray
<tk-tag color="red">Red</tk-tag>
<tk-tag color="orange">Orange</tk-tag>
<tk-tag color="green">Green</tk-tag>
<tk-tag color="indigo">Indigo</tk-tag>
<tk-tag>Gray</tk-tag>

color takes 13 names: red, orange, yellow, green, mint, teal, cyan, blue, indigo, purple, pink, brown, and gray (default).

  • Use one color per category, the same everywhere it appears.
  • Give neighboring categories different colors.
  • Use gray for people and for labels with no category.

Colors for labels people create

To color tags people type, hash the label onto the 12 colors other than gray. The same label always gets the same color; two labels can share one. Trim and lowercase typed labels before hashing.

const CHROMATIC = ['red', 'orange', 'yellow', 'green', 'mint', 'teal',
  'cyan', 'blue', 'indigo', 'purple', 'pink', 'brown'];

function tagColor(label) {
  let h = 5381;
  for (const ch of label) h = ((h * 33) ^ ch.codePointAt(0)) >>> 0;
  return CHROMATIC[h % 12];
}

Leading icon or avatar

Featured Mira Petrova
<tk-tag color="green"><tk-icon slot="leading" name="star"></tk-icon>Featured</tk-tag>
<tk-tag removable><tk-avatar slot="leading" shape="circle" size="20" name="Mira Petrova"></tk-avatar>Mira Petrova</tk-tag>
  • An icon is drawn at 16px in the tag's color.
  • A person is a size-20 tk-avatar in leading with the name as the label. The Avatar shape rule applies: a circle for people, a square for teams and organizations.
  • Always write the name. Don't add a presence dot; there is no room.
  • Keep people tags gray unless the color means a category.

Long labels and groups

  • A label never wraps. Limit the tag's width and the label ends in an ellipsis; the ✕ or ✓ stays. Screen readers still hear the full label.
  • Keep labels under about 20 characters. Show the full text in a Tooltip.
  • Tags flow and wrap like words. Keep one kind per group.
  • Too many tags? Show the first few and add a "+N" tag named "N more tags". The group is yours to build.