Components

Button

A basic component that is used to trigger an action or event.

Examples

Below are examples of how to use the Button component.

Use the variant prop to change the visual style of the button.

Use the size prop to change the Button size.

Use the colorScheme prop to change the Button background.

Use the radius prop to change the Button border-radius.

Use the design prop to change the Button design style.

Pass the isLoading prop to display a loading indicator to the button.

You can also customize the loading spinner by passing a custom component to the spinner prop.

Icons may be place at the start or end of a button:

See the comprehensive guide below for a complete reference to all of the props available to the components.