# ContentIndicator

```tsx
import { ContentIndicator } from '@tangible/ui';
```

Interactive docs and examples: [ContentIndicator in Storybook](https://storybook-tangible-ui.pages.dev/?path=/docs/primitives-contentindicator--docs).

## ContentIndicator props

| Prop | Type | Default | Description |
| - | - | - | - |
| `icon` | `IconName` | | Icon to display in the center. Uses the icon registry path format: "category/name" |
| `className?` | `string` | | Additional CSS class names. |
| `label?` | `string` | | Accessible label for the indicator. Required for meaningful icons. Omit only if the icon is purely decorative and context is provided by surrounding content. |
| `size?` | `"lg" \| "md" \| "sm" \| "xs"` | `'sm'` | Size of the indicator. `'xs'`: 16px circle; `'sm'`: 24px circle (default); `'md'`: 32px circle; `'lg'`: 40px circle |
| `theme?` | `"danger" \| "default" \| "info" \| "success" \| "warning"` | `'default'` | Color theme for the indicator. |
| `variant?` | `"ring" \| "solid"` | `'ring'` | Visual variant. `'ring'`: Hollow circle with border (default); `'solid'`: Filled circle with icon in contrasting color |

## Examples

- [Accessibility (Labelled vs Decorative)](https://storybook-tangible-ui.pages.dev/?path=/story/primitives-contentindicator--accessibility): The `label` prop decides the semantics: with a label the indicator is `role="img"` and announces it; without one it is presentational (`aria-hidden`) — correct when adjacent visible text already carries the meaning, wrong when the indicator is the only signal. The label is a plain prop, so translate it at the call site.

Other stories: Playground, Themes, Variants, Sizes, Content Types ([interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/primitives-contentindicator--docs)).

## Component API tokens

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.

- `--tui-content-indicator-bg`
- `--tui-content-indicator-border`
- `--tui-content-indicator-fg`

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/primitives-contentindicator--docs