Button

A basic component that is used to trigger an action.

Variants

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

Sizes

Use the size prop to change the size of the button.

Radius

Use the radius prop to change the radius of the button.

Icon

Use the leftIcon or rightIcon prop to add an icon to the button.

Loading

Use the isLoading prop to add a loading indicator to the button.

API Reference

This component extends the buttonelement and accepts all its props.

variant

Type:

"solid" | "ghost" | "danger"

Defines the button style variant

Default:

solid
size

Type:

"md" | "lg" | "xl"

Defines the button size

Default:

md
width

Type:

string

Specifies the width of the button. If provided, it sets the button’s width to the specified value.

Default:

auto
radius

Type:

"md" | "lg" | "xl" | "full"

Defines the border radius which the button will inherit

Default:

lg
disabled

Type:

boolean

Disables the button

Default:

false
isLoading

Type:

boolean

Shows a loading state on the button

Default:

false
rightIcon

Type:

JSX.Element

An icon element displayed on the side side of the Button

Default:

null
leftIcon

Type:

JSX.Element

An icon element displayed on the left side of the Button

Default:

null
backgroundColor

Type:

string

The background color of the button

Default:

default
color

Type:

string

Sets the custom text color

Default:

default
fullWidth

Type:

boolean

If true, the button will take up the full width of its container.

Default:

false
mode

Type:

"light" | "dark"

Sets the theme mode for the button component.

Default:

light
outlineBorderColor

Type:

string

The border style for the button when in outline variant

Default:

default
onHoverBackground

Type:

string

The background color of the button when hovered.

Default:

colors.blue[600]

If you encounter any bugs or issues while using Spectrum UI, please report them by creating a new issue. Your feedback is invaluable and helps improve the library.