Buttons

Buttons play a crucial role in functionality, whether for submitting a form or navigating to another page.

Basic

A button allows users to perform actions through clicks, presses, taps, or keystrokes.

Installation

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

Manual installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

Intent

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

Shape

Buttons support various shapes to fit different design needs.

Size

Buttons are available in multiple sizes.

With icon

You can add icons to buttons, and their color will match the button's color.

Disabled

A disabled button cannot be interacted with and is visually styled to reflect its state.

Pending

A button can indicate a pending state using the isPending prop. This provides feedback for actions that take time, communicates the status to assistive technologies, and disables interactions except for focus.

With loader

You can add a loader to indicate ongoing processes.

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

Flexible blocks and templates
Use ready-made blocks to craft unique pages without starting from scratch.
blocks.intentui.com