Chips

Chips

Chips (also called Tags) are compact elements that represent inputs, attributes, or actions. They can be interactive (selectable, removable) or purely informational.

Basic Chips

Simple non-interactive chips for displaying metadata.

Design Development Product Research 
<span class="Chip">Design</span>
<span class="Chip">Development</span>

With Icons

Add leading icons for visual context.

John Doe Today San Francisco 
<span class="Chip">
    <i class="ph ph-user"></i>
    John Doe
</span>

Removable Chips

Add a close button to allow users to remove chips.

React TypeScript Node.js 
<span class="Chip Chip--removable">
    React
    <button class="Chip-remove" aria-label="Remove React">
        <i class="ph ph-x"></i>
    </button>
</span>

Selectable Chips

Chips that can be toggled on/off, useful for filters.

<button class="Chip Chip--selectable">Open</button>
<button class="Chip Chip--selectable Chip--selected">
    <i class="ph ph-check"></i>
    Selected
</button>

Color Variants

Semantic colors for different contexts.

Default Primary Success Warning Error 
<span class="Chip">Default</span>
<span class="Chip Chip--primary">Primary</span>
<span class="Chip Chip--success">Success</span>
<span class="Chip Chip--warning">Warning</span>
<span class="Chip Chip--error">Error</span>

Outlined Variant

Lighter visual weight with border-only styling.

Default Primary Success Warning Error 
<span class="Chip Chip--outlined">Default</span>
<span class="Chip Chip--outlined Chip--primary">Primary</span>

Sizes

Small
Small Primary
Default
Default Primary
Large
Large Primary 
<span class="Chip Chip--small">Small</span>
<span class="Chip">Default</span>
<span class="Chip Chip--large">Large</span>

Avatar Chips

Chips with leading avatar for people or entities.

A Alice B Bob Carol 
<span class="Chip Chip--avatar">
    <span class="Chip-avatar">A</span>
    Alice
</span>

<span class="Chip Chip--avatar">
    <img class="Chip-avatar" src="avatar.jpg" alt="">
    Carol
</span>

Input Chips

Common pattern for tag inputs in forms.

javascript typescript react 
<div class="ChipInput">
    <span class="Chip Chip--small Chip--removable">
        tag
        <button class="Chip-remove">×</button>
    </span>
    <input type="text" placeholder="Add tag...">
</div>

Use Cases

Filter Bar

Active filters:
Status: Open Assigned: Me Label: Bug

Category Tags

Tutorial Beginner
Getting Started with Standard
Learn how to set up and customize the design system.

Common Patterns

Status Badges in Tables

Order #4281 Shipped Express

Skill Tags on a Profile

Skills

JavaScript React CSS Node.js Figma

Multi-select Chip Group

Select your interests:

Notification Badges

Inbox 3 Alerts 7

Customization

Override chip styles using CSS custom properties:

/* Custom chip colors */
.Chip--brand {
  background-color: oklch(60% 0.18 280 / 0.15);
  border-color: oklch(60% 0.18 280 / 0.3);
  color: oklch(50% 0.18 280);
}

/* Pill shape (more rounded) */
.Chip--pill {
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
}

/* Square chips */
.Chip--square {
  border-radius: var(--r-s);
}

/* Custom size */
.Chip--xl {
  padding: var(--space-2) var(--space-4);
  font-size: 1rem;
  gap: var(--space-2);
}

/* Filled selected state with custom color */
.Chip--selectable.Chip--selected {
  background-color: oklch(50% 0.15 250);
  border-color: oklch(50% 0.15 250);
}

Theme Overrides

/* Dark theme adjustments */
[data-theme="dark"] .Chip {
  background-color: oklch(25% 0 0);
  border-color: oklch(35% 0 0);
  color: oklch(85% 0 0);
}

[data-theme="dark"] .Chip--primary {
  background-color: oklch(60% 0.15 250 / 0.25);
  color: oklch(75% 0.1 250);
}

API Reference

Classes

ClassDescription
.ChipBase chip styling
.Chip--primaryPrimary color variant
.Chip--successSuccess color variant
.Chip--warningWarning color variant
.Chip--errorError color variant
.Chip--outlinedTransparent background with border
.Chip--smallSmaller chip size
.Chip--largeLarger chip size
.Chip--removableChip with dismiss button
.Chip--selectableInteractive toggle chip
.Chip--selectedActive selected state
.Chip--avatarChip with leading avatar
.Chip-removeDismiss button element
.Chip-avatarAvatar element inside chip

Attributes

AttributeDescription
aria-labelRequired on .Chip-remove to describe what is removed
role="listitem"Use when chips are in a list context
aria-pressedUse on selectable chips to indicate state

CSS Reference

/* Base */
.Chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background-color: var(--bg-s);
  border: 1px solid var(--bd);
  border-radius: var(--space-4);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}

.Chip i {
  font-size: 1rem;
  color: var(--fg-3);
}

/* Remove button */
.Chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  margin: -2px;
  margin-left: var(--space-1);
  border-radius: 50%;
  cursor: pointer;
  color: var(--fg-3);
  transition: all 0.15s;
}

.Chip-remove:hover {
  background-color: oklch(0% 0 0 / 0.1);
  color: var(--fg);
}

/* Selectable */
.Chip--selectable {
  cursor: pointer;
  transition: all 0.15s;
}

.Chip--selectable:hover {
  border-color: var(--bd-s);
}

.Chip--selected {
  background-color: var(--accent);
  border-color: var(--accent);
  color: white;
}

.Chip--selected i {
  color: white;
}

/* Color variants */
.Chip--primary {
  background-color: oklch(60% 0.15 250 / 0.15);
  border-color: oklch(60% 0.15 250 / 0.3);
  color: oklch(50% 0.15 250);
}

.Chip--success {
  background-color: oklch(55% 0.15 150 / 0.15);
  border-color: oklch(55% 0.15 150 / 0.3);
  color: oklch(45% 0.15 150);
}

.Chip--warning {
  background-color: oklch(70% 0.15 80 / 0.15);
  border-color: oklch(70% 0.15 80 / 0.3);
  color: oklch(50% 0.15 80);
}

.Chip--error {
  background-color: oklch(55% 0.2 25 / 0.15);
  border-color: oklch(55% 0.2 25 / 0.3);
  color: oklch(50% 0.2 25);
}

/* Outlined variant */
.Chip--outlined {
  background-color: transparent;
}

/* Sizes */
.Chip--small {
  padding: 2px var(--space-2);
  font-size: 0.75rem;
}

.Chip--large {
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
}

/* Avatar variant */
.Chip--avatar {
  padding-left: 2px;
}

.Chip-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  object-fit: cover;
}

Accessibility

  • Use <button> for interactive chips — Ensures keyboard accessibility
  • Provide aria-labels for remove buttons — Screen readers need context
  • Announce changes — Use aria-live regions when chips are added/removed
  • Ensure sufficient contrast — Especially for colored variants

Keyboard Support

Key Action
Tab Move focus between chips
Enter / Space Toggle selectable chip or activate remove button
Backspace / Delete Remove focused removable chip

Screen Reader Guidance

<!-- Removable chip with proper labels -->
<span class="Chip Chip--removable" role="listitem">
    React
    <button class="Chip-remove" 
            aria-label="Remove React from selection">
        <i class="ph ph-x" aria-hidden="true"></i>
    </button>
</span>

<!-- Chip group with live region -->
<div role="list" aria-label="Selected filters">
    <span class="Chip" role="listitem">Filter 1</span>
    <span class="Chip" role="listitem">Filter 2</span>
</div>
<div aria-live="polite" class="sr-only">
    <!-- Announce changes here -->
</div>

Best Practices

Do

  • ✓ Use <button> for interactive chips — Ensures keyboard and screen reader support
  • ✓ Provide descriptive aria-labels — “Remove React” not just “Remove”
  • ✓ Use color + icon together — Don’t rely on color alone to convey meaning
  • ✓ Keep chip text short — One or two words maximum
  • ✓ Group related chips — Use role="list" with role="listitem" children
  • ✓ Announce dynamic changes — Use aria-live when chips are added or removed

Don’t

  • ✗ Use chips for primary actions — Chips are for metadata, filters, and selections
  • ✗ Nest interactive elements — Don’t put a link inside a selectable chip
  • ✗ Overload with too many chips — More than 8-10 becomes overwhelming
  • ✗ Mix sizes in the same group — Keep chip sizes consistent within a cluster
  • ✗ Use vague labels — “Tag 1” tells users nothing
  • ✗ Forget hover/focus states — Interactive chips need clear visual feedback