Button

The Button component is a versatile UI element that provides consistent styling and behavior across your application. It supports multiple variants, sizes, and states to accommodate different use cases.

Button Variants

Different styles for different contexts

Primary

Main call-to-action

<Button variant="primary">Click</Button>

Secondary

Supporting actions

<Button variant="secondary">Click</Button>

Ghost

Low emphasis actions

<Button variant="ghost">Click</Button>

Outline

Subtle emphasis

<Button variant="outline">Click</Button>

With Icons

Primary + Icon

Icon with primary action

<Button variant="primary"><Icon />Save</Button>

Secondary + Icon

Icon with secondary action

<Button variant="secondary"><Icon />Refresh</Button>

Ghost Error

Destructive low emphasis

<Button variant="ghost" semantic="error">Delete</Button>

Semantic Actions

Using outline variant with semantic meaning

Success

Approve or confirm

<Button variant="outline" semantic="success">Approve</Button>

Warning

Requires caution

<Button variant="outline" semantic="warning">Review</Button>

Error

Destructive action

<Button variant="outline" semantic="error">Delete</Button>

Button Groups

Connected buttons for related actions

Pagination Group

Connected buttons for navigation

<div class="button-group">...</div>

API Reference

Props

Prop	Type	Default	Description
`variant`	`'primary' \\| 'secondary' \\| 'ghost' \\| 'outline'`	`'primary'`	Visual style of the button
`size`	`'sm' \\| 'md' \\| 'lg'`	`'md'`	Size of the button
`disabled`	`boolean`	`false`	Disables the button
`class`	`string`	`''`	Additional CSS classes

Variants

Primary: High-emphasis actions using brand colors
Secondary: Medium-emphasis actions with subtle background
Ghost: Low-emphasis actions with transparent background
Outline: Alternative style with border emphasis

Sizes

Small (sm): Compact size for dense layouts
Medium (md): Default size for most use cases
Large (lg): Prominent size for important actions

Usage Examples

Basic Button

<Button variant="primary">Click Me</Button>

With Icons

<Button variant="secondary">
  <Icon src="edit-icon-path" size={16} />
  Edit
</Button>

Disabled State

<Button variant="primary" disabled>
  Disabled Button
</Button>

Button Groups

<div class="button-group">
  <Button variant="secondary">Left</Button>
  <Button variant="secondary">Center</Button>
  <Button variant="secondary">Right</Button>
</div>

Loading State

<Button variant="primary" class="loading">
  Processing...
</Button>

Design Tokens

The Button component uses the following design tokens:

Typography: --typography-body-*, --typography-caption-*, --typography-subheading-*
Spacing: --space-2, --space-3, --space-4, --space-6
Colors: --primary, --surface, --foreground, --border
Radius: --radius-md
Transitions: --transition-base

Accessibility

All buttons are keyboard navigable
Focus states are clearly visible with focus ring
Disabled buttons prevent interaction
Semantic HTML button element is used
ARIA attributes are preserved through prop spreading