# Toggle

A button that stays pressed.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/toggle
```

## Usage

```tsx
import { Toggle } from '@/components/fetaui/toggle'
import { TextBoldIcon } from '@fetaui/react/rounded/text-bold'

export function BoldToggle() {
  return <Toggle aria-label="Bold" icon={<TextBoldIcon />} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| pressed | boolean |  |
| defaultPressed | boolean | false |
| onPressedChange | (pressed: boolean) => void |  |
| appearance | ghost, outline, segment | ghost |
| icon | ReactNode |  |
| children | string |  |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For a setting on the current selection, like bold.

## When not to use

- For a setting that applies across the app: use Switch.
- For one choice from several: use Toggle Group.

## Accessibility

- A native button with aria-pressed.
- Icon only toggles need aria-label.

## Motion

- Press scales to 0.96 and the state fades in over 160 ms.
- With reduced motion, the state fades and nothing scales.