Components / Surfaces and motion / Pill buttons
M4 · Surfaces and motion New
Pill buttons
Pill actions at two heights, 28 px and 34 px, with an 8 px gap.
<div class="c-pills">
<button type="button" class="c-pill">Save</button>
<button type="button" class="c-pill sm ghost">Small</button>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- Actions sit in a compact bar.
- The radius should be a pill rather than 8 px.
When not to use
- The action is a primary page button. Use .btn.
- The control is a filter. Use a chip.
Usage
<div class="c-pills">
<button type="button" class="c-pill">Save</button>
<button type="button" class="c-pill sm ghost">Small</button>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| c-pill | class | — | 34 px height. |
| c-pill sm | class | — | 28 px height. |
| ghost | class | absent | Surface fill and a line. |
| disabled | attribute | absent | Track fill, no action. |
Keyboard
| Key | Action |
|---|---|
| Enter or Space | Activates the button. |
| Tab | Moves across the row. |
Accessibility
- Each button has a text name.
- Disabled uses the disabled attribute.
- Heights meet a 28 px target.
Motion
- No separate motion. The active state is instant.
Pattern origin
Pattern type: pill buttons at 28 px and 34 px, with an 8 px gap.