Button Component
A versatile button component with customizable sizes and styling through class props.
Color Variants
Customize button appearance using Tailwind CSS classes for backgrounds and hover states.
Slate
Gray
Zinc
Neutral
Stone
Blue
Green
Red
Purple
Orange
Yellow
Pink
Size Variants
Five predefined sizes from extra small to extra large for different use cases.
xs
sm
md
lg
xl
Interactive Examples
Real-world button examples with different semantic meanings and styling.
Primary Action
Main call-to-action button
Danger Action
Destructive or warning button
Component Props
Available properties for the Button component.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | undefined | The text displayed on the button |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Controls button size and padding |
| class | string | '' | Additional CSS classes for styling |
| onclick | function | undefined | Click event handler |
| disabled | boolean | false | Disables the button when true |
| type | 'button' | 'submit' | 'reset' | 'button' | HTML button type |