Button | Fragments

Preview

<Button variant="solid">Save changes</Button>

Installation

npx @usefragments/cli add button

Writes src/fragments/ui/components/Button plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Examples

Danger

Destructive action people cannot undo: solid chrome, danger tone.

<Button variant="solid" tone="danger">
  Delete item
</Button>

Tones

Tone is colour and colour is meaning; it works on every variant.

<Stack direction="row" gap="sm" align="center" wrap>
  <Button variant="soft" tone="accent">
    Accent
  </Button>
  <Button variant="soft" tone="info">
    Info

Icon

Square icon-only action. Always pass aria-label.

<Button icon variant="outline" aria-label="Add item">
  <span aria-hidden>+</span>
</Button>

Sizes

sm for inline row actions, lg for hero calls to action.

<Stack direction="row" gap="sm" align="center" wrap>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</Stack>

Disabled

Blocks clicks and drops the button out of the tab order.

<Button disabled>Unavailable</Button>

As Child

Paints button styles onto an anchor or router link; props forward to the child.

<Button asChild variant="outline" aria-label="Open billing settings">
  <a href="#billing-settings">Billing settings</a>
</Button>

Long Label

Long labels stay on one line; shorten the label or give the button room.

<Button>
  Save the localized account preferences and notify every affected workspace administrator
</Button>

API

Component props
Prop	Type	Default	Description
`as`	`enumabutton`	Not set	—
`asChild`	`boolean`	Not set	Merge props onto child element instead of rendering a button. Useful for composition with Link components.
`children`Required	`node`	Not set	—
`fullWidth`	`boolean`	Not set	Make button full width of container
`icon`	`boolean`	Not set	Render as icon-only button (square aspect ratio). Always pass `aria-label`.
`size`	`enumsmmdlg`	`"md"`	Control height.
`tone`	`enumneutralaccentinfosuccesswarningdanger`	Not set	Colour. Defaults to `"accent"` on `solid` and `link`, `"neutral"` on `soft`, `outline` and `ghost`.
`variant`	`enumsolidsoftoutlineghostlink`	`"solid"`	Chrome family.

Accessibility

Label the action, not the widget
No "Click here"
Icon-only buttons need aria-label

Guidance

Use when

Running an action: save, submit, delete
Submitting a form
Opening a dialog or menu

Avoid when

Plain navigation — use Link
Toggling state — use Switch or Checkbox
Picking an option — use Select or RadioGroup

Do not use a Button for plain navigation.

Don’t

<Button href="/settings">Settings</Button>

<Link href="/settings">Settings</Link>

LinkalternativeUse Link for navigation without action context
IconcomplementaryUse Icon inside Button for icon-leading/trailing or icon-only actions
ButtonGroupparentUse ButtonGroup for related action sets

Next steps

Accessibility contractThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.