Button

The Button component allows users to trigger actions, submit forms, and navigate through the application. The button component supports various combinations of variants, themes, sizes, and states.

Default Button

The default button with no specified variant or theme.

Primary Button

Primary buttons are the most prominent buttons in the interface.

Secondary Button

Secondary buttons are less prominent than primary buttons.

Outline Button

Outline buttons have a transparent background with a visible border.

Ghost Button

Ghost buttons are minimally styled and blend into the background when not interacted with.

AI Button

AI variant buttons are used specifically for AI-related actions.

Link Button

Link buttons appear as text links and don’t accept theme props.

Transparent Button

Transparent buttons have no background or border and don’t accept theme props.

Additional Features

Usage

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

// Default button
<Button>Default Button</Button>

// Primary button with themes
<Button variant="primary" theme="default">Primary Button</Button>
<Button variant="primary" theme="success">Success Button</Button>
<Button variant="primary" theme="danger">Danger Button</Button>

// Secondary button
<Button variant="secondary">Secondary Button</Button>

// Outline button with themes
<Button variant="outline">Outline Button</Button>
<Button variant="outline" theme="success">Success Outline</Button>
<Button variant="outline" theme="danger">Danger Outline</Button>

// Ghost button
<Button variant="ghost">Ghost Button</Button>

// AI button (a special variant for AI-related actions)
<Button variant="ai">AI Button</Button>

// Link button (note: doesn't accept theme prop)
<Button variant="link">Link Button</Button>

// Transparent button (note: doesn't accept theme prop)
<Button variant="transparent">Transparent Button</Button>

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

// Rounded button
<Button rounded>Rounded Button</Button>

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

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

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

Type Constraints

The Button component implements a discriminated union pattern with conditional prop requirements:

• When variant is “ghost” or “link”, no theme is allowed
• When variant is “ai”, no theme is needed
• When variant is “solid”, themes “success” and “danger” are not allowed

This ensures type safety and provides proper development-time feedback on invalid component usage.

Props

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