Button
Buttons are used to trigger actions or events, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
Button Variants
Formv0.1.0Last updated: Jul 17
Button Examples
Button with Icons
Buttons can include icons to enhance usability and visual appeal.
Button Examples
Button Sizes
Buttons can have different sizes to fit various use cases.
Button Examples
Button Loading State
Buttons can indicate loading states to inform users that an action is being processed.
Button Examples
Usage Notes
Variants
Default: Use for primary actions like “Submit” or “Save”.Secondary: Use for supporting actions that aren’t the main focus.Outline: Best for actions that should look minimal or subtle.Ghost: Ideal when the button sits on colored backgrounds or inside cards.Destructive: Use for delete, remove, or irreversible actions.Link: Styled as a link. Use when you want a less “button-like” call-to-action.
Sizes
sm: Use in compact spaces like forms, modals, or toolbars.md: Default size. Good for general use.lg: Use when the action needs emphasis, like hero sections.icon: Use when the button only contains an icon (e.g., delete or settings).
With Icons
You can add icons to the left of the button label to visually represent the action.
<Button icon={<Mail />}>Email</Button>Loading State
To show loading state, use the loading prop. It automatically disables the button and shows a spinner.
<Button loading>Saving...</Button>Full Width
To make a button stretch across its container, pass the fullWidth prop.
<Button fullWidth>Submit</Button>