Status

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @diceui/status

LayoutCopy Anchor Link

Import the parts, and compose them together.

import {
  Status,
  StatusIndicator,
  StatusLabel,
} from "@/components/ui/status";
 
return (
  <Status variant="success">
    <StatusIndicator />
    <StatusLabel>Online</StatusLabel>
  </Status>
);

ExamplesCopy Anchor Link

VariantsCopy Anchor Link

Status supports five color variants to represent different states.

Text OnlyCopy Anchor Link

Use status without the indicator for a simpler appearance.

Service Status ListCopy Anchor Link

Display multiple status items in a list format, ideal for system health dashboards.

API ReferenceCopy Anchor Link

StatusCopy Anchor Link

The main container component that provides the badge-style wrapper with color variants.

StatusIndicatorCopy Anchor Link

An animated pulse indicator for the status.

StatusLabelCopy Anchor Link

The text label for the status.

AccessibilityCopy Anchor Link

The Status component uses semantic HTML and follows best practices for accessibility:

• Uses div elements with proper ARIA attributes when needed
• Color is not the only means of conveying information—always include text labels
• Supports keyboard navigation when used with interactive elements via asChild

NotesCopy Anchor Link

• The animated ping effect uses Tailwind's built-in animate-ping utility for smooth performance
• Colors automatically adapt to dark mode
• The indicator animation runs continuously to draw attention to live status changes
• Use the asChild prop to render Status as a link or button for interactive use cases