Button

The Button component provides a flexible, accessible button with glass-morphism styling and multiple variants.

Preview

DefaultPrimarySecondarySuccessWarningDestructiveOutlineGhost

Installation

Package

import { Button } from '@smc/darwin-ui';

shadcn CLI

npx shadcn add https://darwin-ui.mandalsuraj.com/registry/button.json

Usage

import { Button } from '@smc/darwin-ui';

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

Variants

Button supports 8 core variants:

Variant	Description	Use Case
default	Glass-effect background	General actions
primary	Blue solid with glow	Main CTAs
secondary	Subtle glass effect	Secondary actions
success	Green with glow	Confirmations
warning	Amber with glow	Caution actions
destructive	Red with glow	Delete/remove
outline	Transparent with border	Subtle actions
ghost	Transparent	Minimal UI

Sizes

SmallDefaultLarge

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">
  <IconComponent />
</Button>

Size	Height	Use Case
sm	32px	Compact UI, tables
default	36px	Standard buttons
lg	44px	Hero sections, emphasis
icon	36px	Icon-only buttons

With Icons

Add ItemDownloadSettings

import { Plus, Download, Settings } from 'lucide-react';

<Button variant="primary">
  <Plus className="w-4 h-4" />
  Add Item
</Button>

<Button variant="secondary">
  <Download className="w-4 h-4" />
  Download
</Button>

<Button size="icon" variant="ghost">
  <Settings className="w-4 h-4" />
</Button>

Disabled State

<Button disabled>Disabled Button</Button>

Disabled buttons have reduced opacity and don’t respond to interactions.

API Reference

Props

Prop	Type	Default	Description
variant	Variant	"default"	Visual style variant
size	Size	"default"	Button size
disabled	boolean	false	Disable button
className	string	-	Additional classes
children	ReactNode	-	Button content

Types

type Variant =
  | "default"
  | "primary"
  | "secondary"
  | "success"
  | "warning"
  | "destructive"
  | "outline"
  | "ghost";

type Size = "default" | "sm" | "lg" | "icon";

Accessibility

• Uses native <button> element for full keyboard support
• Supports disabled state with proper aria-disabled
• Focus ring visible for keyboard navigation
• Color contrast meets WCAG 2.1 AA standards