Button

Buttons be the real MVPs, man! They're all about gettin' stuff done, whether it’s slamming that form submit or hoppin' to another page.

Basic

A button lets peeps do stuff with clicks, presses, taps, and keystrokes.

Installation

If you hit any issues, make sure you check out the installation guide here.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

Intent

Buttons come in different intents, each with their own color scheme.

Appearance

Buttons can be styled with different appearances.

Shape

Buttons can be styled with different shapes.

Size

Buttons can be styled with different sizes.

With Icon

You can add icons to the button and the color of it will be determined by the button's color.

With Only Icon

If you want to use only an icon, you can use the size="square-petite" prop to make it smaller.

Disabled

When a button is disabled, it cannot be interacted with and is visually indicated by a disabled state.

Pending

A Button can indicate a pending state through the isPending prop. This helps when an action takes time to complete, offering users feedback that the process is ongoing. The pending state communicates the change to assistive technologies and disables interactions, except for focus.

With Loader

You can also add loader to the button.

Sometimes, you need to use styles from buttons for links. Just use the link and use the buttonStyles to the className prop.

Choicebox
File Trigger