Status

Used to indicate the status of an item or a process.

Usage

The Status component is used to communicate the status of an item or a process at a glance. It typically consists of a visual indicator (a dot) and an optional text label.

import { Status } from "@elemnts-ui/react"

<Status.Root colorPalette="success">
  <Status.Indicator />
  <Status.Text>Online</Status.Text>
</Status.Root>

Examples

Sizes

The Status component supports different sizes: sm, md (default), and lg.

Only Indicator

You can use the indicator without text for a more compact representation.

API Reference

Root

Prop	Type	Default
asChild	`boolean`	`false`