components
Installation
Usage
Imports
/components/ui/button.tsx
Code
/components/ui/button.tsx
Examples
Button Colors
Button Variants
Button - w/Icon
Size
Button is loading
Disabled
Rounded Button
Button as Input
Link Button
Icon Button
Compact Button
Button Group
Button Group -w/Icon Button
Button - w/Badge
Social Login Button
Fancy Button - Glossy
Fancy Button - Smooth
Custom Button - Elevated
App Stores Button
Props
<Button>
| Name | Default | Values |
|---|---|---|
| variant | strong | strongsoftoutlineghostlinkglossyglossy-invertedsmoothsmooth-inverted |
| color | primary | primaryinfosuccesswarningerrorneutral |
| size | 36 | 283236404448 |
| disabled | false | boolean |
| loading | false | boolean |
| start | - | ReactNode |
| end | - | ReactNode |
| asChild | false | boolean |
<Buttongroup>
| Name | Default | Values |
|---|---|---|
| variant | outline | strongsoftoutlineghostglossy-invertedsmoothsmooth-inverted |
| color | neutral | primaryinfosuccesswarningerrorneutral |
| size | 36 | 283236404448 |
<CompactButton>
| Name | Default | Values |
|---|---|---|
| variant | strong | strongsoftoutlineghostglossy-invertedsmoothsmooth-inverted |
| color | primary | primaryinfosuccesswarningerrorneutral |
| size | 28 | 2832 |
| disabled | false | boolean |
| asChild | false | boolean |