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
Variant props
variant, size
Key exports
Button, buttonVariants
Example Code
import { Button } from "@hilum/ui"
<Button>Default</Button>
<Button variant="brand">Brand</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>Button
Variants
All available visual styles
Sizes
xs · sm · default · lg
Pill shape
rounded-full — the primary CTA style
With icons
Leading icons, trailing icons, icon-only
States
Disabled, loading