Button

The action trigger, in six variants and four sizes, with a built-in loading state.

Buttons trigger actions. Every variant restyles across all four presets via the token contract — the default, secondary and destructive variants carry the surface recipe, so they pick up preset shadows, gloss and blur automatically.

Installation

import { Button } from "@iammikz/srui";

Usage

<Button>Click me</Button>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"`	`"default"`	Visual style
`size`	`"sm" \| "md" \| "lg" \| "icon"`	`"md"`	Control size (`icon` is square)
`loading`	`boolean`	`false`	Shows a spinner, disables the button, sets `aria-busy`
`asChild`	`boolean`	`false`	Renders the single child element (e.g. a router `<Link>` or `<a>`) with the button styling instead of a `<button>`; the spinner is skipped in this mode
...props	`React.ButtonHTMLAttributes<HTMLButtonElement>`	—	All native button attributes

asChild

<Button asChild>
  <a href="/pricing">Pricing</a>
</Button>

Examples

Variants

Sizes

Loading state

loading disables the button and announces progress to screen readers via aria-busy.

Accessibility

Native <button> element: Enter and Space activate it for free.
loading sets disabled and aria-busy="true" so assistive tech announces the in-flight state.
Focus rings use outline-* (never Tailwind ring-*, which would collide with preset surface shadows) and are tuned to stay legible on the neumorphic gray field via --ring.