Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Components
  2. Status Dot
  3. API and Development

Status dot

API and Development

View Source
Submit Issue

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.

StatusDot

Name

Type

Default

Description

color

StatusDotColor

StatusDotColor.Info

Semantic color of the status dot.

pulsing

boolean

false

When true, applies a pulsing animation to draw attention.

Storybook

Interactive examples and edge cases for this component are in Storybook.

Default
Info
Success
Warning
Error
Neutral
Pulsing
With Label
All Variants

StatusDotIndicator

Name

Type

Default

Description

color

StatusDotColor

required

Dot color.

inset

boolean

false

Inset vs edge placement.

pulsing

boolean

—

Animate dot.

bordered

boolean

false

Ring around dot.

children

ReactNode

required

Wrapped content (e.g. avatar).

Default

Info

Success

Warning

Error

Neutral

Dormant states such as archived rows. Unlike the semantic colors, it carries no attention glow.

Pulsing

With label

All variants

With avatar

Previous

Status dot / Usage

Next

Status dot / Accessibility

On this page

StatusDot
Storybook
StatusDotIndicator
Default
Info
Success
Warning
Error
Neutral
Pulsing
With label
All variants
With avatar