Components
Buttons
A pill button in the library's variants and sizes, with built-in busy, done and pressed states.
A button is a pill in one of the variants — primary for the main action, soft and line for the
rest, ghost for the quietest — in three sizes. Return a promise from onClick and the button runs
itself: it shows the busy face until the promise settles, then the done face. ButtonCopy copies
text and flashes a check.
Preview
Variants
Sizes
States
Copy
Usage
<!-- include core.css + buttons.css -->
<button class="dm-pill dm-primary">Primary</button>
<button class="dm-pill dm-accent">Accent</button>
<button class="dm-pill dm-soft" aria-pressed="false">Preview</button>
<button class="dm-pill dm-line">Line</button>
<button class="dm-pill dm-ghost">Ghost</button>
<!-- sizes -->
<button class="dm-pill dm-accent dm-sm">Small</button>
<button class="dm-pill dm-accent dm-btx-lg">Large</button>Properties
| Name | Type | Description |
|---|---|---|
variant | primary | accent | soft | line | ghost | ink | The style. Left out, a plain pill. ink is the old name for primary. |
size | sm | md | lg | The three sizes; md is the default. |
icon | IconName | An icon before the label. |
onClick | (e) => void | Promise<unknown> | Return a promise and the button runs busy then done by itself. |
busy / done | boolean | Drive the busy or done face yourself. Clicks are ignored while shown. |
busyLabel / doneLabel | ReactNode | The labels on the busy and done faces. |
busyGlyph | spin | think | The busy glyph: a spinner, or the agent's turning dots. |
success | boolean | The done face turns green. |
pressed | boolean | For a toggle: whether it is on, as aria-pressed. |
tip / kbd | string | A tooltip, with an optional shortcut after it. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The
variants read against the theme's accent and surface tokens; in Soft the pills are rounder and
softer, and the busy and done faces blur across in either theme.