Buttons & Actions
Button
Primary action button with variants, sizes, a loading spinner and asChild slotting.
The primary action button. It renders YunUI's .btn classes, supports style variants and sizes, shows a loading spinner, and can slot its styling onto a child element (e.g. a routing <Link>) via asChild.
Import
import { Button } from "@yuhuanowo/yunui";
Variants
Variants
Sizes
Sizes
States
Loading & disabled
Icon button
For icon-only actions use IconButton, which adds an accessible label and a built-in tooltip.
IconButton
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | — | Render the single child element with the button styling instead of a <button> (e.g. wrap a <Link>). |
| loading | boolean | — | Show a spinner before the children and disable the button while busy. |
| size | "sm" | "md" | "lg" | "icon" | md | Size: `sm`, `md` (default), `lg`, or `icon` (square 40×40). |
| variant | "default" | "primary" | "secondary" | "ghost" | "accent" | "brand" | "outline" | "amber" | "red" | "destructive" | default | Visual style. Options: `primary`, `secondary`, `ghost`, `accent`, `outline`, `amber`, `red`/`destructive`. |