# Button

Triggers an action. Variants, sizes, pill shape and icon support.

Group: Basics

## Import

```tsx
import { Button } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
<HStack wrap="wrap" gap="3">
  <Button>Default</Button>
  <Button variant="subtle">Secondary</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="plain">Link</Button>
  <Button colorPalette="red">Destructive</Button>
</HStack>

<HStack wrap="wrap" gap="3">
  <Button rounded="full" variant="subtle">Get Started</Button>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</HStack>
```

## Variants

Set these as props. Values come from the live theme.

- `variant`: `solid`, `subtle`, `surface`, `outline`, `ghost`, `plain`
- `size`: `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`
- `colorPalette`: `gray`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `cyan`, `purple`, `pink`