Button Examples
Explore the various button styles, sizes, and states available in Heco UI.
Button Variants
Different visual styles for various contexts and purposes.
Button Sizes
Different size options to fit various UI contexts.
Button States
Buttons can have different states to indicate their current status.
Buttons with Icons
Buttons can include icons to enhance visual communication.
Button Groups
Buttons can be grouped together for related actions.
Usage Examples
Common button usage patterns in real-world interfaces.
Subscription Plan
Your plan renews on Jan 1, 2025
Delete Account
This action cannot be undone
Button API
The Button component API reference.
Button Props
| Prop | Description | Type | Default |
|---|---|---|---|
| variant | Visual style variant of the button | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" |
| size | Size of the button | "default" | "sm" | "lg" | "icon" | "default" |
| disabled | Whether the button is disabled | boolean | false |
| asChild | Merge props with child element | boolean | false |