Avala Design
← Components/primitives

Button

Carbon-spec Button re-implementation. Seven kinds × five sizes, plus `asChild` for Radix Slot composition (matches the legacy @avala/ui Button API surface).

primitivesstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Button } from "@avala/design";

<Button kind="primary" size="md">Click me</Button>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-button--defaultOpen in Storybook →

When to use

  • Any user-triggered action — submit, save, cancel, open dialog, navigate via asChild.
  • The exemplar primitive: every other interactive primitive defers to Button's kind/size matrix, so reach for it first.

When not to use

  • Icon-only triggers without visible text → use `IconButton` (it requires aria-label).
  • Anchor-styled inline links inside prose → use `Link`.
  • A toggle on/off control → use `Toggle` or `Switch`.