Button
Displays a button or a component that looks like a button.
Installation
Install via CLI:
npx @sickui/cli add button
Manual Installation
If you prefer to install manually, copy and paste the following code into your project.
npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge
Usage
Variants
Use the variant prop to change the visual style of the Button.
Sizes
Use the size prop to change the size of the Button.
Loading State
Use the disabled prop with a loading spinner for async actions.
Examples
Variants
You can use the variant prop to create different button styles.
Sizes
Use the size prop to create buttons of different sizes.
Loading State
You can show a loading state by disabling the button and adding a loading spinner.
API Reference
Button
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | The variant of the button |
size | "default" | "sm" | "lg" | "icon" | "default" | The size of the button |
asChild | boolean | false | Change the default rendered element for the one passed as a child |
Accessibility
The Button component is built on top of the native button element and includes:
- Keyboard navigation: Supports
EnterandSpacekey activation - Focus management: Proper focus indicators and focus trapping
- Screen reader support: Semantic button element with proper ARIA attributes
- Disabled state: Properly communicated to assistive technologies
Examples in the Wild
Here are some real-world examples of how the Button component is used:
- Call-to-action buttons in hero sections
- Form submission buttons in contact forms
- Navigation buttons in pagination components
- Action buttons in data tables and cards