# Button

Group: Actions

Text button with an optional leading or trailing icon.
- `variant`: `primary` (the one `action` per view), `secondary` (bordered), `ghost` (toolbar, low emphasis), `danger` (destructive, confirm first).
- `size`: `sm` 32, `md` 40, `lg` 52. `loading` swaps the icon for a spinner and sets `aria-busy`. `block` fills the width.
- Labels are verbs in sentence case ("New Visualli", "Join early access"). Never two primaries side by side.


## Props

```ts
export interface ButtonProps { variant?: 'primary' | 'secondary' | 'ghost' | 'danger'; size?: 'sm' | 'md' | 'lg'; icon?: IconName; iconEnd?: IconName; loading?: boolean; block?: boolean; disabled?: boolean; onClick?: () => void; children?: ReactNode }
```

## Use

```ts
import { Button } from '@visualli/design-system/components';
```