Button Component
A versatile button component with multiple variants and sizes, built with accessibility in mind.
- Supports multiple variants: primary, secondary, outline, and ghost.
- Available in various sizes: small, medium, and large.
- Fully accessible with ARIA attributes.
Installation
The Button component is part of our UI library. You can import it directly from the components directory.
Usage
Here is how to use the button in your project.
React TSX
React TSX
Examples
Default Button
Secondary Button
Outline Button
Destructive Button
Ghost Button
Link Button
Button Sizes
Button with Icon
Icon Button
Loading Button
API Reference
Button Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'icon' | 'default' | Controls the visual style of the button |
size | 'default' | 'sm' | 'lg' | 'icon' | 'default' | Controls the size of the button |
asChild | boolean | false | When true, the component will render its child as the button |
icon | ReactNode | - | Optional icon to display alongside the button text |
loading | boolean | false | When true, displays a loading spinner and disables the button |
className | string | - | Additional CSS classes to apply to the button |
children | ReactNode | - | The content of the button |
disabled | boolean | false | When true, disables the button |
Additionally, the Button component accepts all standard HTML button attributes.
CSS Classes
The button uses the following CSS class variants:
Variant Classes
default: Primary button with background colordestructive: Red/danger button for destructive actionsoutline: Button with a border and transparent backgroundsecondary: Alternative button style with different backgroundghost: Button with no background until hoveredlink: Button that appears as a text linkicon: Special variant optimized for icon-only buttons
Size Classes
default: Standard button size (h-9 px-4 py-2)sm: Small button size (h-8 rounded-md px-3 text-xs)lg: Large button size (h-10 rounded-md px-8)icon: Square button size for icon-only buttons (h-9 w-9)