Button
Triggers actions. Supports multiple variants, sizes, and icon compositions.
When To Use
- Use buttons for explicit user-triggered actions such as submit, save, continue, or open.
- Choose the variant and size that matches the action hierarchy in the surrounding view.
- Prefer this page when you need to compare action density, icon usage, and loading or disabled states side by side.
When Not To Use
- Do not use a button when plain text, static status, or passive decoration would communicate the state just as well.
- Do not overload a single view with too many equally prominent buttons; reduce or demote secondary actions first.
Accessibility Notes
- Keep headings, labels, and supporting text in the DOM before decorative chrome so the page reads well without styles or scripts.
- Test the pattern with keyboard navigation and a screen reader before treating the visual layout as complete.
- Use status, selection, and disabled states that remain understandable without color alone.
Key Props / API
Props
asChild, loading, leadingIcon, trailingIcon, active
Key exports
Button, buttonVariants
Example Code
import { Button } from "@hilum/ui"
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="ghost">Ghost</Button>Button
Variants
Fluid visual styles
Sizes
sm · md · lg · icon sizes
Radius modes
Rounded by default, pill via ShapeProvider
With icons
Leading and trailing icon slots
Loading & Disabled
Built-in loading state