Button

Triggers an action or event. Use buttons for the most important actions on a page.

Import

import { Button } from '@aspect/react';

Variants

Use variant to communicate intent.

<Button variant="primary">Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost">Skip</Button>
<Button variant="destructive">Delete</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="icon" aria-label="Settings">⚙</Button>

Loading state

When loading is true, the button shows a spinner, sets aria-busy, and disables interaction.

<Button loading>Saving...</Button>

Polymorphic rendering

Use asChild to render the button styles on a different element, like a Next.js Link:

<Button asChild>
  <a href="/dashboard">Go to dashboard</a>
</Button>

Props

| Prop | Type | Default | Description | | ---------- | ------------------------------------------------------ | ----------- | -------------------------------------- | | variant | 'primary' \| 'secondary' \| 'ghost' \| 'destructive' | 'primary' | Visual style | | size | 'sm' \| 'md' \| 'lg' \| 'icon' | 'md' | Size preset | | loading | boolean | false | Shows spinner, disables interaction | | disabled | boolean | false | Disables the button | | asChild | boolean | false | Render as child element via Radix Slot | | type | 'button' \| 'submit' \| 'reset' | 'button' | HTML button type |

CSS class

For non-React usage, apply the BEM classes directly:

<button class="mizu-button mizu-button--primary mizu-button--md">Save</button>

The button uses component-scoped custom properties internally (--_bg, --_bg-hover, --_color, --_border). Each variant modifier overrides only the properties it needs — pseudo-classes (:hover, :active) are defined once on the base class.

Guidelines

Do:

Don't:

Accessibility