# Shadcn Icon & Label

> Toggle with icon.

- Type: example, free and open source (MIT)
- Component: [Toggle](https://reui.io/components/toggle.md)
- Page: https://reui.io/components/toggle/c-toggle-6
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/toggle.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/toggle.md
- MCP: `get_example("c-toggle-6")`
- Registry item: https://reui.io/r/styles/base-nova/c-toggle-6.json
- Uses: Toggle

## Best for

A single outline bookmark toggle with an icon and a fixed Bookmark label, left uncontrolled

## When not to use

- A save control whose icon and label change once it is pressed: use [Label Swap](https://reui.io/components/toggle/c-toggle-10.md) (`get_example("c-toggle-10")`)

## Install

```bash
npx shadcn@latest add @reui/c-toggle-6
```

## About Shadcn Toggle

### When to use

- Editor formatting controls that stay pressed, such as bold, italic, underline and strikethrough
- Reaction and save controls, such as like, retweet, share and bookmark, with or without a count
- Media and app controls with an on and off state, such as mute, pin to sidebar or a notifications bell

### When not to use

- A one time action such as Save, Send or Delete that keeps no pressed state: use [Button](https://reui.io/components/button.md) (`get_component("button")`)
- Related actions joined edge to edge into one strip, such as playback or zoom controls: use [Button Group](https://reui.io/components/button-group.md) (`get_component("button-group")`)
- A set of options read as one value and crossed with arrow keys, such as text alignment: use [Toggle Group](https://reui.io/components/toggle-group.md) (`get_component("toggle-group")`)

### Agent notes

- Pressed state lives inside each `Toggle` or a local `useState` and nothing saves it; read changes from `onPressedChange` to persist them
- Every `Toggle` here is named by `aria-label`, which wins over its visible text for screen readers, so update both when relabelling

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.