Status

Default

Online

Away

Offline

Unknown

<div class="flex flex-col gap-2">
	<div class="flex items-center gap-2">
		{ui status, variant: 'success' /}
		Online
	</div>
	<div class="flex items-center gap-2">
		{ui status, variant: 'warning' /}
		Away
	</div>
	<div class="flex items-center gap-2">
		{ui status, variant: 'destructive' /}
		Offline
	</div>
	<div class="flex items-center gap-2">
		{ui status /}
		Unknown
	</div>
</div>

A status is a dot and nothing else, so the word beside it carries the meaning. The dot is hidden from screen readers unless you pass label, which turns it into an image with that name. Leave label out when the text next to it already says the state, as above.

The variants use the success, warning, info and destructive tokens. Without one the dot is the muted text colour.

Sizes

<div class="flex items-center gap-4">
	{ui status, variant: 'info', size: 'sm', label: 'Small' /}
	{ui status, variant: 'info', label: 'Default' /}
	{ui status, variant: 'info', size: 'lg', label: 'Large' /}
</div>

The size is the width and height of the dot, set by --status-size. Like a button, size has both spellings: the param for a fixed size, and the class status-lg when it changes by breakpoint.

On an avatar

<div class="relative inline-block">
	{ui avatar, initials: 'AL' /}
	{ui status,
		variant: 'success',
		label: 'Online',
		class: 'absolute bottom-0 right-0 ring-2 ring-background',
	/}
</div>

Place it with utilities in class. Here the dot sits on the avatar's corner, with a ring in the page colour to cut it from the photo. When the dot stands alone like this, give it a label.

Param	Default	Description
label	null	what the dot means, read by screen readers; leave out when the text beside it says so
variant	null	success, warning, info or destructive
size	null	sm or lg
class	''	added to status
attrs	[]	any other attributes, e.g. ['id' => 'online']

Params