Pills · Smallest

Variants

Primary is the default: white with shadow-sm. Secondary is flat neutral-100, tertiary is outlined, and transparent only fills on hover.

InboundOutboundDraftArchived

Status

Positive, warning and danger carry state. Use them only when the colour matches the meaning of the label.

LiveDegradedFailed

With icon

Place a leading icon before the label. Icons render at 14px.

CompletedHigh latencyCall dropped

import { CircleCheckIcon, CircleXIcon, Pill, TriangleAlertIcon } from "@smallest-inc/ui";

export default function PillWithIcon() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Pill variant="positive">
        <CircleCheckIcon />
        Completed
      </Pill>
      <Pill variant="warning">
        <TriangleAlertIcon />
        High latency
      </Pill>
      <Pill variant="danger">
        <CircleXIcon />
        Call dropped
      </Pill>
    </div>
  );
}

Link

Pass render={<a href />} when a pill navigates. link-primary reads as a text link and underlines on hover.

View transcript Nova Sales Assistant

Best practices

When to use

Use for short, scannable status or category metadata attached to the thing it describes.
Don't use a Pill as a primary action; use Button or Toggle when interaction is required.

Behavior

primary (white, shadow-sm) is the default. Use secondary on white surfaces, tertiary for an outlined neutral label, and transparent for low-emphasis tags that fill on hover.
positive, warning and danger carry state. Use them only when the label means that state ("Live", "Degraded", "Failed").
Leading icons render at 14px. Pass render={<a href />} when a pill navigates; link-primary reads as an inline link.

Content

Use the canonical status or category name, one or two words, sentence case.

Accessibility

Don't rely on colour alone: the label must carry the meaning. Link pills need a destination-specific label.