# Toggle

> Pressed/unpressed button for view state.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/toggle.json`

## Install

```tsx
import { Toggle } from "@aspyn-io/kit";
```

### Basic

```tsx
<Toggle aria-label="Toggle bold">
  <BoldIcon />
</Toggle>
<Toggle variant="outline">Breaks</Toggle>
```

### With text

Pair an icon with a visible label when the meaning isn't obvious from the glyph alone.

```tsx
<Toggle variant="outline">
  <BoldIcon />
  Bold
</Toggle>
```

### Sizes

sm, default, and lg heights via the size prop.

```tsx
<Toggle size="sm" aria-label="Small">
  <BoldIcon />
</Toggle>
<Toggle size="default" aria-label="Default">
  <BoldIcon />
</Toggle>
<Toggle size="lg" aria-label="Large">
  <BoldIcon />
</Toggle>
```

### Disabled

```tsx
<Toggle disabled aria-label="Toggle bold">
  <BoldIcon />
</Toggle>
<Toggle disabled defaultPressed aria-label="Toggle bold">
  <BoldIcon />
</Toggle>
```

## Notes

- Toggle is an on/off pressed button (aria-pressed): good for filter pills.
- Use Switch for settings, Toggle for view/filter state.