Button
A component that triggers an action when clicked, commonly used for submitting forms or performing other actions.
Examples
Variants
Sizes
Button as link
Using the as prop you can change the rendered element. This is useful for example when you want to
render a link styled as a button.
Button with icon
To add icons within the button use the leftIcon and rightIcon props respectively. The icon size adapts automatically to the size of the button.
Loading state
Pass the isLoading prop to show the button's loading state. This will disable the button and show a loading indicator.
Accessibility
- Provide a clear
labelfor the button that describes its action. - Avoid placing buttons very close to other interactive elements to prevent accidental activation. Important for e.g users with motor impairments.
API Reference
| Prop | Default | Description |
|---|---|---|
as? | - | "button" |
type? | 'button' | "button" | "submit" | "reset"The HTML |
size? | 'md' | ResponsiveProp<"sm" | "md" | "lg" | "xl" | "xs">Sets the size of the button |
variant? | 'secondary' | "primary" | "secondary" | "tertiary"Sets the style variant of the button |
isFullWidth? | false | booleanIf |
isLoading? | false | booleanIf |
isDisabled? | false | booleanIf |