Components
Button

Button

Buttons exist to initiate an action when the user clicks or taps on it. They are used across various interfaces to direct users, submit forms, initiate downloads, and trigger modal dialogs, among other actions.

Examples

Default

Default Button.

Icon Button

Add icons to the left or right of the text by passing the iconLeading or iconTrailing props to the component, respectively. To just get an icon in the Button, don't pass any children to the Button.

Size

Change the size by passing the size prop to the component.

variant

Change the variant by passing the variant prop

Color

Change the color by passing the color prop

Installation

Properties

In addition to default HTML properties, the Button component has the following properties:

size
"sm"
"md"
"lg"
default: "md"

Size of the Button.

color
"primary"
"neutral"
"danger"
default: "primary"

Color of the Button.

variant
"filled"
"outline"
"soft"
"ghost"
"gradient"
default: "filled"

Variant of the Button.

iconLeading
React.ReactNode

Icon shown to the left of the Button.

iconTrailing
React.ReactNode

Icon shown to the right of the Button.

disabled
boolean
default: false

Toggles whether the Button is disabled.

className
string

Classname to style the Button.