Button

The default way to run an action. Use primary for the one main action of a view, outline or ghost for the rest, danger for removal and danger-solid only to confirm something that cannot be undone.

Button

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Button

Variants

Sizes

States

Long label in a narrow box

Dark theme, Button

Variants

Sizes

States

Long label in a narrow box

High contrast theme, Button

Variants

Sizes

States

Long label in a narrow box

UsageLink to the section Usage

tsx

import { Button } from '@skribly/ui/actions'

tsx

<Button onPress={save} isPending={saving} pendingLabel="Saving">
  <Save aria-hidden />
  Save changes
</Button>
<Button variant="danger">Remove</Button>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A native button: Tab to reach it, Enter or Space to press.
While pending it keeps focus, ignores presses, stops form submission and is read with its pending label.
Disabled buttons leave the tab order; when a person needs to know why, use GatedAction.
Long labels wrap rather than overflow, and every variant keeps a border so it stays visible in Windows high contrast.

This demo runs through axe in all three themes on every test run. See what the tests check.