Button
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.
With Only Icon
For icon-only buttons, use the size="square-petite" prop to make them more compact.
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.
Link
Sometimes, you need to use styles from buttons for links. Just use the link and use the buttonStyles to the className prop.