Button

The Button component allows users to trigger actions, submit forms, and navigate through the application.

Usage

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

// Basic usage
<Button>Default Button</Button>

// With variant and theme
<Button variant="soft" theme="primary">Primary Soft Button</Button>

// Special AI theme (no variant allowed)
<Button theme="ai">AI Button</Button>

// Ghost and Link variants (no theme allowed)
<Button variant="ghost">Ghost Button</Button>
<Button variant="link">Link Button</Button>

// With size
<Button size="sm">Small Button</Button>
<Button size="lg">Large Button</Button>

// With rounded corners
<Button rounded>Rounded Button</Button>

// Icon only button
<Button iconOnly><Icon name="plus" /></Button>

// Loading state
<Button loading>Loading</Button>

// Disabled state
<Button disabled>Disabled</Button>

Variant and Theme Compatibility

The Button component uses a discriminated union pattern with strict type checking to enforce certain prop combinations:

1. When variant is “ghost” or “link”, no theme is allowed
2. When theme is “ai”, no variant is allowed
3. When variant is “solid”, theme cannot be “success” or “danger”

Variants

The Button component supports different visual variants.

Themes

The Button component supports different color themes.

Sizes

The Button component comes in three sizes: sm, default, and lg.

Rounded

Buttons can have rounded corners with the rounded prop.

Icon Only

Buttons can be configured to display only an icon with the iconOnly prop.

Loading

Buttons can display a loading state with the loading prop.

Disabled

Buttons can be disabled with the disabled prop.

API Reference

Prop	Required	Default	Type
variant	false	'solid'	'solid' | 'surface' | 'soft' | 'ghost' | 'link'
theme	false	'primary'	'primary' | 'success' | 'danger' | 'muted' | 'ai'
size	false	'default'	'sm' | 'default' | 'lg'
rounded	false	false	boolean
iconOnly	false	false	boolean
loading	false	false	boolean
disabled	false	false	boolean
asChild	false	false	boolean
className	false		string
children	true		ReactNode