ContentIndicator

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

Interactive docs and examples: ContentIndicator in Storybook.

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

Accessibility (Labelled vs Decorative): 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).

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