Button
Button Variants
Different visual styles for various use cases.
<Button variant="primary">Click Me</Button>
Semantic Color Variants
Semantic colors for different actions and states.
<Button variant="info">Submit</Button>
Button Sizes
Five sizes from extra small to extra large.
<Button size="md">Button</Button>
Buttons with Icons
Add icons on the left or right side of the button text.
<ButtonleftIcon={<Search className="w-4 h-4" />}>Search</Button>
Loading State
Show loading spinner and disable interaction.
<Button isLoading>Save Changes</Button>
Disabled State
Disabled buttons cannot be interacted with.
<Button disabled>Disabled Button</Button>
Full Width Button
Use className to make buttons full width.
<Button className="w-full">Full Width Button</Button>
Button as Link
Add an href prop to render the button as an anchor tag with full button styling.
<Button href="/contact" variant="primary">Navigate</Button><Button href="/docs" variant="outline">Learn More</Button>
Note: When using href, the button renders as an <a> tag instead of a <button>. All button styles and features (variants, sizes, icons) work the same way.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "outline" | "ghost" | "info" | "success" | "warning" | "error" | "primary" | Visual style of the button |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Size of the button (padding and font size) |
| disabled | boolean | false | Disables the button and prevents interactions |
| isLoading | boolean | false | Shows loading spinner and disables the button |
| leftIcon | ReactNode | undefined | Icon or element to display on the left side |
| rightIcon | ReactNode | undefined | Icon or element to display on the right side |
| href | string | undefined | When provided, renders button as an anchor tag for navigation |
| onClick | () => void | undefined | Click event handler |
| className | string | undefined | Additional CSS classes to apply |
| children | ReactNode | required | Button content (text or elements) |