Button

The everyday action element. Four variants, two sizes, radius that follows the rounded/pill setting.

Playground

Switch the variant and size, add a leading or trailing icon, then turn Icon only on to get the square form and watch the Code tab add the aria-label it needs.

Variants

Primary carries the accent and there should rarely be more than one in view; secondary and ghost do the everyday work; danger is for destructive actions only.

States

Hover, focus, and press are live on every example above; disabled is the one you set. Disabled buttons keep their variant, dimmed.

Styling states

Variant, size, and icon-only are data attributes; hover, focus, press, and disabled are the native pseudo-classes, since this is a real button:

.ub-button[data-variant="secondary"]:hover:not(:disabled) {
  background: var(--ub-bg-muted-hover);
}

.ub-button[data-icon-only] {
  border-radius: var(--ub-radius-full);
}

As a link

Styling is class and data-attribute based, so anchors can look like buttons without a wrapper component. Base styles carry the default size; add data-size="compact" for the small one:

<a href="/quick-start" className="ub-button" data-variant="primary">
  Get started
</a>

Props

Everything a native button accepts, plus:

type defaults to "button" so buttons inside forms don't submit by accident.

Agent instructions

Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.

Button, from @usebones/react.
- variant: "primary" | "secondary" | "ghost" | "danger" (default "primary"). Danger is for destructive actions only.
- size: "default" (36px) | "compact" (28px). iconOnly makes it square and requires aria-label.
- Icons are children via @usebones/icons: <Icon name="..." /> before the label for leading, after for trailing, alone with iconOnly.
- type defaults to "button"; every native button prop passes through.
- Links styled as buttons: <a className="ub-button" data-variant="primary">.
- Restyle in CSS via .ub-button, [data-variant], [data-size], [data-icon-only], :hover, :focus-visible, :active, :disabled. Tokens only.