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
Button with Icon#
You can add left and right icons to the Button components. See how to add icons to your project
You can also use icons from popular libraries like react-icons and just pass it into the button.
Button loading state#
isLoading prop to the Button component to show it's loading state. You
can optionally pass
loadingText prop, if you do, the button will show a
spinner and the loading text. Otherwise, the button will take the width of the
text label and show only the spinner
- Button has
- When Button has focus, Space and Enter activates it.
Button composes PseudoBox and all props you pass (variant, variantColor, etc.) are converted to style props. This means you can override any style of the Button via props.
In event you need to make your own custom button, you can leverage the
PseudoBox component. It provides the
style props to style the button.
The Button composes the
PseudoBox component so you can pass props for
PseudoBox. These are props related to the Button component.
|The label of the button|
|The color of the button. Use a color key passed in |
|The variant of the button style to use.|
|The label to show in the button when |
|The size of the button.|
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2020 Segun Adebayo