Data display

Status

@xui/status

A coloured dot with a label, for the state of a thing — online, degraded, failed.

Install

pnpm add @xui/status

Add the barrel to a standalone component's imports:

import { XuiStatusImports } from '@xui/status';

@Component({
  imports: [XuiStatusImports],
  // …
})

Examples

Default

Loading preview…

<div class="inline-flex gap-2">
  <xui-status presence="online" />
  <xui-status presence="idle" />
  <xui-status presence="dnd" />
  <xui-status presence="offline" />
</div>

API

XuiStatus

component

xui-status

A presence dot — the badge that says whether someone is online.

Variants

Axis

Options

Default

presence

online

idle

dnd

offline

—

size

md

Inputs

Name

Type

Default

class

ClassValueThe user-defined classes

''

presence

XuiStatusVariants['presence']Which state to show. Each one carries both its own colour and its own cut-out shape.

this.config.presence

size

XuiStatusVariants['size']Diameter of the dot, from the shared control scale.

this.config.size

Source

libs/ui/status/xui