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 to:
variantof all buttons within it.
spacingbetween the buttons.
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.
|css||The emotion's css style object||-|
|iconSpacing||The space between the button icon and label.||-|
|isActive||If `true`, the button will be styled in its active state.||-|
|isDisabled||If `true`, the button will be disabled.||-|
|isFullWidth||If `true`, the button will take up the full width of its container.||-|
|isLoading||If `true`, the button will show a spinner.||-|
|leftIcon||If added, the button will show an icon before the button's label.||-|
|loadingText||The label to show in the button when `isLoading` is true If no text is passed, it only shows the spinner||-|
|rightIcon||If added, the button will show an icon after the button's label.||-|
|spinner||Replace the spinner component when `isLoading` is set to `true`||-|