Status

A feedback component that renders a color-coded node representing systemic status states. 

Sizes

Use the status-{size} class to control the component size.

Size values can include:smmdlgxl.

For more information on all available sizing utilities, visit Tailwind 

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solid.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Customizing

:root {
  --ex-status-size-sm: 6px;
  --ex-status-size-md: 8px;
  --ex-status-size-lg: 10px;
  --ex-status-size-xl: 12px;
 
  --ex-status-radius-sm: 9999px;
  --ex-status-radius-md: 9999px;
  --ex-status-radius-lg: 9999px;
  --ex-status-radius-xl: 9999px;
}

API

Status