Button

Button

Starts an action, such as saving a form or opening a dialog.

Import

import { Button } from "@booleanpress/ui/button"

Usage

Use a button for an action, and a link for a place. When a link should look like a button, pass asChild and the link: the button's classes move onto it.

import { Button } from "@booleanpress/ui/button"

export function Actions() {
  return (
    <div className="flex gap-2">
      <Button>Save</Button>
      <Button variant="outline">Cancel</Button>
    </div>
  )
}

variant sets the emphasis: one default button per area, outline or ghost for the others, destructive for an action that removes something. size keeps the density scale: 36 px by default, 32 px sm, 24 px xs, and square icon sizes for a button with an icon and no text.

Examples

Variants

Each emphasis, from the main action to a link.

Sizes

The density scale, with and without text.

With an icon

A 16 px icon before the text; an icon-only button names itself with aria-label.

Loading

A spinner replaces the icon, the button is disabled and keeps its width.

Disabled

A disabled button ignores clicks and leaves the tab order.

Add a sender address to publish.

As a link

asChild puts the button's look on a link, which keeps the link's role and address.

Read the button pattern

Accessibility

Semantics: A native button, or the element you pass with asChild (keep a link a link).
Labels: Its text is its name. An icon-only button needs aria-label, and a tooltip with the same words helps sighted users.
Focus: It is in the tab order unless it is disabled. The focus ring shows on keyboard focus, not on click.
Known limits: A disabled button cannot be focused, so a tooltip on it cannot open. Say why it is disabled next to it.

Keyboard

Keyboard
Key	Behaviour
`Enter`	Activates the button.
`Space`	Activates the button.

API

Renders a button and passes it every other prop.

Button props
Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the child element instead, with this part's behaviour and classes merged onto it.

Also exported: buttonVariants, the class names of Button's variants and sizes (cva), to give another element the same look.

Every part takes className, merged with its defaults by cn(), and ref, which reaches the element it renders.

Data attributes: data-slot="button" (Button), and data-variant, data-size.

Theming

The tokens its classes read. Change their values in your theme, and it follows.

Theme tokens
Token	Used for
`--accent`	background
`--accent-foreground`	text
`--background`	background
`--destructive`	border, focus ring, background
`--input`	border, background
`--primary`	background, text
`--primary-foreground`	text
`--ring`	border, focus ring
`--secondary`	background
`--secondary-foreground`	text