Button
A premium, interactive button component with variant and size configurations.
Preview
Installation
1. Styles & Variations
Presets
Explore the different preset variants of the Button component, designed for different roles, style frameworks, and visual hierarchies.
Sizes & Icon Placements
Buttons support different size configurations and can house leading/trailing icons or standalone icon styles.
States
Buttons transition cleanly through loading, disabled, and interaction states.
Props
Animation Speed Control
You can fully customize the speed of any animated button variant by overriding its respective CSS variable in your style attribute or custom classes:
| Variant | CSS Variable | Default Speed |
| :--- | :--- | :--- |
| shimmer | --shimmer-duration | 2.5s |
| shine | --shine-duration | 0.75s |
| progress | --progress-duration | 2s |
| border-gradient | --border-duration | 4s |
| spin-border | --spin-duration | 2s |
Example Usage
// Render a spin-border button that spins twice as fast (1 second duration)
<Button
variant="spin-border"
style={{ '--spin-duration': '1s' } as React.CSSProperties}
>
Fast Spin
</Button>