COMPONENT

Chip

A small label for a fact about something — a technology on a project, a status on a row, a tag on a person. It is not a control, and it never pretends to be one.

All six

Three ideas, really — quiet, selected and open — plus a muted form for things that are present but no longer live.

TYPESCRIPT WEBGL RUST SELECTED OPEN ARCHIVED

HTML

<div class="chip-row">
  <span class="chip">TYPESCRIPT</span>
  <span class="chip">WEBGL</span>
  <span class="chip">RUST</span>
  <span class="chip chip-selected">SELECTED</span>
  <span class="chip chip-open">OPEN</span>
  <span class="chip chip-muted">ARCHIVED</span>
</div>

The small one

`chip-sm` changes the size and the padding and nothing else, so it composes with any of the three ideas above rather than being a fourth. It is for a chip attached to a bigger thing — a status beside a title, a badge on a hero — where the ordinary chip reads as a second heading instead of a note on the first.

The same three ideas, one step down. Reach for it when the chip is riding on something bigger and the ordinary one starts reading as a second heading.

ALPHA SELECTED OPEN ARCHIVED

HTML

<div class="flow flow-tight">
  <p class="measure">
    The same three ideas, one step down. Reach for it when the chip is riding on
    something bigger and the ordinary one starts reading as a second heading.
  </p>
  <div class="chip-row">
    <span class="chip chip-sm">ALPHA</span>
    <span class="chip chip-sm chip-selected">SELECTED</span>
    <span class="chip chip-sm chip-open">OPEN</span>
    <span class="chip chip-sm chip-muted">ARCHIVED</span>
  </div>
</div>

Reference

Read from components/chip.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.chip.chip-sm.chip-selected.chip-open.chip-muted.chip-row

READS--ds-accent--ds-accent-deep--ds-cream--ds-font-display--ds-gap--ds-hairline--ds-ink-faint--ds-ink-on-accent--ds-ink-on-cream--ds-ink-soft--ds-pad-chip--ds-pad-chip-sm--ds-radius-pill--ds-rule--ds-rule-strong--ds-sunk--ds-text-chip--ds-text-chip-sm--ds-track-note

Notes

A CHIP IS NOT A BUTTON

No hover, no focus, no cursor change — a thing that looks pressable and is not is worse than a thing that looks inert. If it needs to be clickable, it is a .btn.btn-sm, and it gets the focus ring that comes with that.

The corner is a pill rather than a stated 13px, so it stays a pill when the text wraps to two lines.