# Button

The primary action surface — solid, ghost and inverse, with a loading state and an arrow that leans into the hover.

- Family: Foundation, imported from `mizu-ui` or `mizu-ui/ui`
- Docs: https://mizu.user64bit.world/components/button
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/ui/Button.tsx

## Usage

```tsx
import { Button, ButtonLink } from "mizu-ui";

export function Actions() {
  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        gap: 12,
        alignItems: "center",
      }}
    >
      <Button variant="solid">Continue</Button>
      <Button variant="ghost" size="sm">
        Cancel
      </Button>
      <Button loading>Saving</Button>
      <ButtonLink href="/next">Next page</ButtonLink>
    </div>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/button
```

## Props

- `variant`: `"solid" | "ghost" | "inverse"` (default `"solid"`). Surface treatment. Inverse is for use on accent fills.
- `size`: `"md" | "sm"` (default `"md"`). Padding and type scale.
- `loading`: `boolean` (default `false`). Preserves the action label, adds a diamond spinner and disables the button.
- `arrow`: `boolean` (default `true`). Show the corner arrow that translates on hover.
- `label`: `string`. ButtonLink only — sets aria-label. Use it only when the link has no text of its own; a label that differs from the visible text hides that text from speech input and screen readers.

## Accessibility

Renders a real `<button>` / `<a>`. Disabled states use the disabled attribute; loading is conveyed through role=status on the spinner.

## Motion

Arrow translates 2px on hover with expo easing. Loading retains the label and replaces the arrow.