# Shadcn Count Badge

> Toggle with notification count badge

- Type: example, free and open source (MIT)
- Component: [Toggle](https://reui.io/components/toggle.md)
- Page: https://reui.io/components/toggle/c-toggle-7
- 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-7")`
- Registry item: https://reui.io/r/styles/base-nova/c-toggle-7.json
- Uses: Badge, Toggle

## Best for

A bell in the default variant with a destructive count badge on its top right corner that hides while pressed

## Agent notes

- The count is a fixed 3 inside `Badge`, shown only while `pressed` is false; feed it your unread total

## Install

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

## 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.