Skip to content
github

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.

Installation

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>Medium Size Button (default)</Button>
<Button size="sm">Small Button</Button>
<Button size="xs">Extra Small Button</Button>


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


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

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 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.

Promise callback

When the onClick prop returns a promise, the button automatically shows a loading state until the promise resolves or rejects.

Looking for icon-only buttons? See Icon Button.