Foundation component · Feedback

Status Marker

Compact status signal available as a dot or labeled presentation.

Live playground

Choose a presentation

Use Dot where adjacent text already names the status.
Use Label when the marker must communicate independently.

Accessibility

Label presentation never relies on color alone.
Dot is decorative unless the consumer supplies an accessible label.

Implementation

Semantic StyleX colors with consumer-owned label content.

import { StatusMarker } from "@lenso/ui/status-marker";

<StatusMarker presentation="label" status="success">
  On track
</StatusMarker>;