# Shadcn With Icon

> Badge with an icon

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

## Best for

An outline label led by a check glyph that the primitive sizes to 12px with no class of its own

## Agent notes

- An svg child with no size class of its own is forced to `size-3`, so give a larger icon its own size utility

## When not to use

- A person tag with a profile photo and a remove control: use [With Avatar](https://reui.io/components/badge/c-badge-24.md) (`get_example("c-badge-24")`)

## Install

```bash
npx shadcn@latest add @reui/c-badge-20
```

## About Shadcn Badge

### When to use

- Status and severity labels in solid, light and outline tones for success, warning, info and errors
- Counts and short tags such as an unread number or a New marker, sized to the text around them
- Compact chips pairing a label with an icon, a dot, an avatar, a flag or a remove control, or acting as a link

### When not to use

- An action that saves, opens or submits a form when pressed: use [Button](https://reui.io/components/button.md) (`get_component("button")`)
- Helper text revealed when a control is hovered or focused: use [Tooltip](https://reui.io/components/tooltip.md) (`get_component("tooltip")`)
- A finished KPI or profile tile with a trend or status chip as one detail: use the [Card blocks](https://reui.io/blocks/application/card.md)

### Agent notes

- Import `Badge` from `@/components/reui/badge`; the shadcn `Badge` of the same name lacks `size`, `radius` and the success, info and warning variants
- The default `radius` follows the style, square in lyra and sera and a pill in maia, luma and rhea; `radius` full gives a pill in every style

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.