Button

Buttons are widely utilized within React Aria, serving to initiate actions such as form submission or page navigation. They are versatile, employed for everything from basic labels to intricate form structures.

Basic

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

Installation

In the terminal, run the following command to begin:
npx hq-kit add button

Variant

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

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.

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 buttonVariants to the className prop.