Button

A versatile button component built with Headless UI, supporting multiple variants, colors, and sizes.

Import

import { Button } from '@/components/ui';

Basic Usage

<Button>Default Button</Button>
<Button color="blue">Primary Button</Button>
<Button outline>Outline Button</Button>
<Button plain>Plain Button</Button>

Props

Prop Type Default Description
color 'dark/zinc' | 'light' | 'dark/white' | 'dark' | 'white' | 'zinc' | 'indigo' | 'cyan' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'sky' | 'blue' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' 'dark/zinc' Button color theme
outline boolean false Outline style variant
plain boolean false Plain text style variant
size 'xs' | 'sm' | 'md' 'md' Button size
href string - Renders as a link when provided
disabled boolean false Disable button
className string - Additional CSS classes

Variants

Solid (Default)

<Button color="blue">Blue</Button>
<Button color="green">Green</Button>
<Button color="red">Red</Button>
<Button color="purple">Purple</Button>

Outline

<Button outline>Outline Button</Button>

Plain

<Button plain>Plain Button</Button>

Sizes

<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium (Default)</Button>

With Icons

import { PlusIcon } from '@/components/icons';

<Button color="blue">
  <PlusIcon data-slot="icon" />
  Add Item
</Button>

As Link

<Button href="/dashboard" color="blue">
  Go to Dashboard
</Button>

Loading State

import { Spinner } from '@/components/ui';

<Button disabled>
  <Spinner size="sm" />
  Loading...
</Button>

Full Width

<Button className="w-full" color="blue">
  Full Width Button
</Button>

Color Reference

Color Light Mode Dark Mode
blue Blue-600 Blue-600
green Green-600 Green-600
red Red-600 Red-600
purple Purple-500 Purple-500
dark/zinc Zinc-900 Zinc-600
light White Zinc-800