@darksnow-ui/button

A customizable button component with multiple variants, sizes, and states.

Installation

npm install @darksnow-ui/button
# or
yarn add @darksnow-ui/button
# or
pnpm add @darksnow-ui/button

Usage

import { Button } from "@darksnow-ui/button"

export function Example() {
  return (
    <Button variant="default">
      Click me
    </Button>
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link" | "default" | Visual style variant | | size | "default" \| "sm" \| "lg" \| "icon" | "default" | Size of the button | | asChild | boolean | false | Render as child element using Radix Slot | | disabled | boolean | false | Whether the button is disabled | | className | string | - | Additional CSS classes |

Variants

Default

The primary action button with accent colors.

<Button variant="default">Save Changes</Button>

Destructive

For dangerous actions like deletion.

<Button variant="destructive">Delete</Button>

Outline

Secondary actions with bordered style.

<Button variant="outline">Cancel</Button>

Secondary

Subtle background, good for less important actions.

<Button variant="secondary">View Details</Button>

Ghost

Minimal styling, good for icon buttons or subtle actions.

<Button variant="ghost">Toggle</Button>

Link

Styled like a text link.

<Button variant="link">Learn More</Button>

Sizes

Small

Compact button for tight spaces.

<Button size="sm">Small</Button>

Default

Standard button size.

<Button size="default">Default</Button>

Large

Larger button for emphasis.

<Button size="lg">Large</Button>

Icon

Square button perfect for icons.

<Button size="icon">🚀</Button>

Examples

Basic Usage

<Button>Click me</Button>

With Icons

import { Plus, Download } from "lucide-react"

<Button>
  <Plus className="mr-2 h-4 w-4" />
  Add Item
</Button>

<Button variant="outline">
  <Download className="mr-2 h-4 w-4" />
  Download
</Button>

As Link

<Button asChild>
  <a href="/dashboard">Go to Dashboard</a>
</Button>

Loading State

import { Loader2 } from "lucide-react"

<Button disabled>
  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
  Please wait
</Button>

Full Width

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

Button Groups

<div className="flex gap-2">
  <Button variant="outline">Cancel</Button>
  <Button>Save</Button>
</div>

All Variants Demo

<div className="flex flex-wrap gap-4">
  <Button variant="default">Default</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="link">Link</Button>
</div>

All Sizes Demo

<div className="flex items-center gap-4">
  <Button size="sm">Small</Button>
  <Button size="default">Default</Button>
  <Button size="lg">Large</Button>
  <Button size="icon">🚀</Button>
</div>

States

<div className="flex gap-4">
  <Button disabled>Disabled</Button>
  <Button variant="destructive" disabled>
    Destructive Disabled
  </Button>
  <Button variant="outline" disabled>
    Outline Disabled
  </Button>
</div>

Accessibility

• Supports keyboard navigation with Tab and Enter/Space
• Provides proper focus indicators with focus-visible:ring-2
• Disabled state removes from tab order and shows visual feedback
• When using asChild, ensure the child element maintains proper semantics

Theming

The button uses CSS custom properties for theming:

• --theme-accent - Primary button background
• --theme-accent-content - Primary button text
• --theme-danger - Destructive button background
• --theme-surface - Outline button background
• --theme-bg - Secondary button background

Technical Details

• Built with class-variance-authority for variant management
• Uses clsx for conditional class names
• Built on top of Radix UI's Slot component for polymorphic rendering
• All HTML button attributes are supported through prop spreading
• SVG icons are automatically sized to size-4 (16px)

License

MIT © DarkSnow UI