Button
The primary action surface — solid, ghost and inverse, with a loading state and an arrow that leans into the hover.
Live — this one is real
Usage
import { Button, ButtonLink } from "mizu-ui";
export function Actions() {
return (
<>
<Button variant="solid">Continue</Button>
<Button variant="ghost" size="sm">
Cancel
</Button>
<Button loading>Saving</Button>
<ButtonLink href="/next" label="Next page">
Next page
</ButtonLink>
</>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect ui/Button.tsx
Source is included in the npm package under src/ui/Button.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "solid" | "ghost" | "inverse" | "solid" | Surface treatment. Inverse is for use on accent fills. |
| size | "md" | "sm" | "md" | Padding and type scale. |
| loading | boolean | false | Preserves the action label, adds a diamond spinner and disables the button. |
| arrow | boolean | true | Show the corner arrow that translates on hover. |
| label | string | — | ButtonLink only — sets aria-label for icon-only links. |
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.