Scale — Button Pill

Install

Examples

Types

Ten visual types, ordered by emphasis — the same scale as Button in a rounded shape.

Primary

Secondary

Tertiary

Outline

Mono

Negative

Sizes

Large

Medium

Small

With icons

Add a leading-icon or trailing-icon to reinforce the action.

Play

Filter

States

Disabled

As a segmented control

Inside a Button Group with selectable, each pill becomes a single-select option.

24h

30d

90d

Guidelines

Usage

filter chips, tag-like toggles, and segmented controls — pair with a Button Group for single-select. For standard form and page actions, use Button.

Do

Use pills for filters, toggles, and segmented choices.
Keep a clear, action- or value-led label on every pill.
Pick one shape per context — don’t mix pills and square buttons in the same row.

Don’t

Don’t use pills for primary form or page actions — use Button.
Don’t ship icon-only pills — use Button Icon.
Don’t stack several primary pills competing for attention.

Accessibility

Element: renders a native <button type="button"> — keyboard focusable by default.
Activation: Enter / Space activates.
Busy / disabled: loading sets aria-busy and disables the button; disabled blocks activation.
Label: the visible text carries the meaning — keep a label rather than relying on an icon alone.
Selection: inside a selectable Button Group the group exposes each pill as a radio with aria-checked.
Focus: shows the global keyboard focus ring.

Properties

Button — the squared-off counterpart for standard actions.
Button Group — group pills into a selectable segmented control.
Button Icon — icon-only actions in dense toolbars.
Tag — non-interactive labels and metadata.

Button Pill