# UGIndicator 角标容器

> 适配器：React；状态：available；slug：`indicator`。

将状态点、徽标或操作稳定定位到内容的九个边缘锚点。

## 适用场景

- 把状态点、数量徽标或辅助操作定位到头像、按钮、卡片等内容边缘。

## 不适用场景

- 普通文档流内的状态文字使用 Badge；不会叠加到其他内容时不需要 Indicator。

## 公开入口

- 包入口：`@ug666/ui-react/primitives`
- 公开成员：`UGIndicator`、`UGIndicatorItem`
- 交互文档：[https://ui.ug666.top/react/components/indicator](https://ui.ug666.top/react/components/indicator)

```tsx
import { UGIndicator, UGIndicatorItem } from '@ug666/ui-react/primitives'
```

## 使用规则

- UGIndicatorItem 必须是 UGIndicator 的直接子元素；start/end 是逻辑方向并自动适配 RTL；装饰性状态点使用 aria-hidden。
- 受控值使用当前组件声明的 value/onValueChange 或公开回调。
- 涉及 Hook、Portal 或浏览器状态时保留 client boundary。
- 只通过公开 Props、事件、插槽、class/className 和语义 Token 扩展。

## 相关候选

- [badge](https://ui.ug666.top/ai/react/components/badge.md)
- [avatar](https://ui.ug666.top/ai/react/components/avatar.md)
- [button](https://ui.ug666.top/ai/react/components/button.md)

## 生成前检查

- 当前适配器是否真实提供该组件。
- 导入路径、组件名和 API 是否存在于当前版本类型声明。
- 是否覆盖长文本、窄容器、键盘、焦点、disabled、loading 和错误状态。