Foundations/Button
Button
Triggers an action or event. Supports multiple variants, sizes, and compositions including icon-only and grouped layouts.
Variants
Use the variant prop to change the visual weight of the button.
Sizes
Use the size prop to adjust the button's dimensions.
With Icons
Place icons before or after the label. Use size='icon' for icon-only buttons.
Destructive
For irreversible or dangerous actions.
States
Disabled prevents interaction. Loading communicates in-progress actions — click 'Save changes' to demo.
Button Group
Merge adjacent buttons into a single unified control. Borders are collapsed automatically.
As Link
Use asChild to render the button styles on any element — including Next.js Link for client-side navigation.