---
title: "Button"
description: "Primary button primitive with sized variants."
section: "Libraries"
group: "UI components"
order: 503
---

## Usage

```tsx
import { Button } from "@aeontel/ui";

<Button onClick={handleClick}>New agent</Button>
<Button variant="outline" size="sm">Cancel</Button>
<Button variant="destructive">Delete workspace</Button>
```

## Exports

### `Button`

Primary button element.

```ts
Button(props: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): JSX.Element
```

**Props**

| Prop       | Type                                                                                                      | Default     | Description |
| ---------- | --------------------------------------------------------------------------------------------------------- | ----------- | ----------- |
| `variant?` | `"link" \| "default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| null \| undefined`        | `"default"` |             |
| `size?`    | `"default" \| "sm" \| "lg" \| "xs" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undefined` | `"default"` |             |

### `buttonVariants`

cva variant builder for button classNames.

Heights, paddings, and gaps reference token aliases (`--control-h-*`,
`--control-px-*`, `--control-gap-*`) that resolve via the density
cascade — compact (web default, ~32px) vs comfortable (mobile, 44px).
Mount `<DensityProvider value="comfortable">` on a subtree (or the
mobile `<VariableContextProvider>`) to flip the cascade.

```ts
buttonVariants(config?: { variant?: ButtonVariant; size?: ButtonSize; className?: string }): string
```