Button
Button Component
Versatile button component with multiple variants, sizes, and states. Built on Radix UI for accessibility.
Import
import { Button } from '@covers/ui';Usage
import { Button } from '@covers/ui';
// Variants
<Button variant="default">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
// Sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><IconHere /></Button>
// With loading state
<Button disabled>
<Loader className="animate-spin mr-2" />
Loading...
</Button>Props
| Name | Type | Description |
|---|---|---|
| variant | "default" | "secondary" | "outline" | "ghost" | "destructive" | Visual style of the button |
| size | "sm" | "default" | "lg" | "icon" | Size of the button |
| disabled | boolean | Disable interactions |
| asChild | boolean | Render as child element (for links) |
Default Styling
bg-blue-600 hover:bg-blue-700 text-white rounded-md px-4 py-2
Part of CoverKit
This component is part of CoverKit (@covers/ui), a dark-first React component library.