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>

// Variants
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="ghost">Ghost Button</Button>
<Button variant="ai">AI Button</Button>
<Button variant="link">Link Button</Button>

// Themes
<Button theme="default">Default Theme</Button>
<Button theme="success">Success Theme</Button>
<Button theme="danger">Danger Theme</Button>

// Sizes
<Button size="lg">Large Button</Button>
<Button>Default Size Button</Button>
<Button size="sm">Small Button</Button>

// Rounded
<Button rounded>Rounded Button</Button>
<Button rounded variant="outline">Rounded Outline Button</Button>

// Icon Only
<Button iconOnly>
  <Icon name="plus" />
</Button>
<Button iconOnly variant="secondary">
  <Icon name="check" />
</Button>

// Loading
<Button loading>Loading Button</Button>
<Button loading variant="primary">Loading Primary Button</Button>

// Disabled
<Button disabled>Disabled Button</Button>
<Button disabled variant="secondary">Disabled Secondary Button</Button>

Props

Prop	Required	Default	Type
variant	false	'primary'	'primary' | 'secondary' | 'outline' | 'ghost' | 'ai' | 'link'
theme	false	'default'	'default' | 'success' | 'danger'
size	false	'default'	'default' | 'sm'
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