Button

Triggers an action — glass secondary by default, with solid primary, ghost, and danger variants.

Preview

Live

<button type="button" class="btn btn-primary">Continue</button>
<button type="button" class="btn">Secondary</button>
<button type="button" class="btn btn-ghost">Ghost</button>
<button type="button" class="btn btn-danger">Delete</button>

Variants

Primary

Solid system blue — main call to action.

Secondary

Default glass button — .btn with no modifier.

Ghost

Low emphasis — tertiary actions and dismiss.

Danger

Destructive actions that need clear warning.

Compact

Tighter padding for dense toolbars and chips rows.

With icon

Add .btn-with-icon and a mask icon span.

Busy

.is-busy + spinner; disable interaction while pending.

Disabled

Native disabled — reduced opacity, no press.

Accessibility

  • Use a real <button type="button"> (or submit) — not a styled link — for actions.
  • Icon-only buttons need an accessible name via visible text or aria-label.
  • When busy, set aria-busy="true" and keep the control disabled so it is not activated twice.
  • Decorative icons use aria-hidden="true"; the spinner is decorative too.
  • Focus rings come from the system stylesheet — do not remove outline without a replacement.

API

HTML classes

Class Description
.btn Base glass button (secondary).
.btn-primary Solid primary action.
.btn-ghost Transparent / low-emphasis.
.btn-danger Destructive action.
.btn-compact Smaller padding and type.
.btn-with-icon Layout for leading icon or spinner.
.btn-icon Size the leading mask icon.
.btn-spinner Busy indicator (pair with .is-busy).
.is-busy Busy pulse state.
.actions Horizontal group of buttons with gap.

React props

From src/core/Button.tsx — extends native ButtonHTMLAttributes<HTMLButtonElement>.

Prop Type Default Description
variant 'primary' | 'secondary' | 'ghost' | 'danger' 'secondary' Visual variant → CSS modifier class.
compact boolean false Applies .btn-compact.
busy boolean false Shows spinner, sets aria-busy, disables the control.
icon IconName — Leading icon from the Caustica Design icon set (hidden while busy).
children ReactNode — Button label / content.
type 'button' | 'submit' | 'reset' 'button' Native button type.
className string — Merged via cx onto the root.
disabled boolean — Also forced when busy is true.