Button

Buttons trigger an action. Three variants -- primary, secondary, and ghost -- with three sizes.

Basic Usage

import { Button } from '@airo-ui/react'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  )
}

Size

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

Disabled & Loading

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

API

Props

Name	Type	Default	Description
variant	'primary' | 'secondary' | 'ghost'	'secondary'	Visual variant
size	'sm' | 'md' | 'lg'	'md'	Size
disabled	boolean	false	Disabled state
loading	boolean	false	Loading state, shows spinner
type	'button' | 'submit' | 'reset'	'button'	Native button type
children	React.ReactNode	--	Button content
onClick	(e: MouseEvent) => void	--	Click handler

Interaction

• Hover floats up 1px with deeper shadow
• Active scale(0.96) with spring bounce
• Color transitions use --ease-smooth, scaling uses --ease-spring