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.
Composed Components
When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.
The Button's decked out with several components to make it bangin'.
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.
All these components are tight, so you gotta use 'em all together.
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 Loader
You can also add loader to the button.
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.
Link
Sometimes, you need to use styles from buttons for links. Just use the link and use the buttonStyles to the className prop.