Button

A versatile button component with multiple variants, sizes, and states.

Import

import { Button } from '@akitectio/aki-ui'

Basic Usage

<Button>Default Button</Button>
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="outline">Outline Button</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

States

<Button disabled>Disabled</Button>
<Button loading={isLoading} onClick={handleClick}>
  {isLoading ? 'Loading...' : 'Click for Loading'}
</Button>

With Icons

<Button>
  <PlusIcon className="w-4 h-4 mr-2" />
  Add Item
</Button>
<Button variant="outline">
  Download
  <DownloadIcon className="w-4 h-4 ml-2" />
</Button>

API Reference

PropTypeDefaultDescription
variant'default' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'link''default'Visual style variant
size'sm' | 'md' | 'lg''md'Button size
loadingbooleanfalseShow loading state
disabledbooleanfalseDisable the button
classNamestring-Additional CSS classes
childrenReactNode-Button content

Accessibility

The Button component follows WAI-ARIA guidelines:

  • • Supports keyboard navigation with Enter and Space keys
  • • Proper focus management and visual indicators
  • • Screen reader friendly with proper role attributes
  • • Loading state announced to assistive technologies
  • • Disabled state properly communicated