The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
size prop to change the size of the button. You can set the value to
variant prop to change the visual style of the Button. You can set the
You can add left and right icons to the Button component using the
RightIcon props respectively.
rightIconprop values should be react elements NOT strings.
You can also use icons from popular libraries like react-icons and pass it into the button.
isLoading prop to show its loading state. By default, the button will
show a spinner and leave the button's width unchanged.
You can also pass the
loadingText prop to show a spinner and the loading text.
You can also change the spinner itself to use custom loaders as per your design
requirements. Pass the
spinner prop and set it to a custom react element.
We've included the colors for common social media platforms, and you can simply
use their buttons via the
The Facebook and Twitter icons in the above example are available from
FaTwitter, found in the
You can use the
ButtonGroup component to group buttons. When you
ButtonGroup component, it allows you:
variantof all buttons within it.
To flush the buttons, pass the
All props you pass (
colorScheme, etc.) are converted to style
props. This means you can override any style of the Button via props.
In the event that you need to make your own custom button, you can leverage the
Box component. It provides the
props to style the button.
Button composes the
Box component so you can pass all props for
are props specific to the Button component.
|An accessible label for the button, useful when you render only an icon in the button|
|The color scheme of the button—one of the colors from |
|The left icon element to use in the button|
|The right icon element to use in the button|
|The spinner element to use when |
|The variant of the button style to use.|
|The label to show in the button when |
|The size of the button.|