API and Development
StatusDot renders a small circular indicator with StatusDotColor (Info, Success, Warning, Error, Neutral) and optional pulsing animation. StatusDotIndicator positions a dot on another element (inset vs edge, optional bordered ring) for avatars or icons.
Name | Type | Default | Description |
|---|---|---|---|
|
|
| Semantic color of the status dot. |
|
|
| When true, applies a pulsing animation to draw attention. |
Interactive examples and edge cases for this component are in Storybook.
Name | Type | Default | Description |
|---|---|---|---|
|
|
| Dot color. |
|
|
| Inset vs edge placement. |
|
|
| Animate dot. |
|
|
| Ring around dot. |
|
|
| Wrapped content (e.g. avatar). |
Dormant states such as archived rows. Unlike the semantic colors, it carries no attention glow.