Button

The Button component can be used to trigger various kinds of user events such as such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

Imports#

• Button: The button which has prefix/suffix icons support, variants & size.
• ButtonGroup: Used to group related buttons together in a horizontal stack, can also be set as attached
• IconButton: Accessible button to show an icon

Usage#

Default Button

Button sizes#

Button variants#

Button prefix & suffix#

You can pass prefix and suffix props to the button to append or prepend any content inside of button.

Button spinner#

You can pass loading prop to indicate that the button is loading.

You can also add custom loading spinner by passing a spinner prop

IconButton#

Icon button provides an accessible way to render an icon within a button. It sets it's children's role to img & sets aria-hidden to true.

ButtonGroup#

ButtonGroup can be used to group together multiple buttons & also collapse their border radius & gap via the attached prop

Button group accepts size & variant prop which is passed down to all the child buttons automatically.

Attached button group, when set to true it collapses border radius of the buttons.

You can also put IconButton inside IconButton

API Reference#

Button#

ButtonGroup#

IconButton#