Presence

A status dot (online/away/busy/offline).

Online

Away

Busy

Offline

import { BuiPresence } from 'ng-blatui';

<bui-presence status="online" [showLabel]="true" />
<bui-presence status="away" [showLabel]="true" />
<bui-presence status="busy" [showLabel]="true" />

Pulse

Online

<bui-presence status="online" [pulse]="true" [showLabel]="true" />

On avatar

<div class="relative inline-flex">
  <bui-avatar class="size-12" src="/u.png" alt="">CN</bui-avatar>
  <span class="absolute end-0 bottom-0"><bui-presence status="online" [pulse]="true" /></span>
</div>

API reference

Inputs

Prop	Type	Default	Description
`status`	`"away" \| "busy" \| "offline" \| "online"`	`'online'`	Presence state, which sets the dot color and default label.
`size`	`"default" \| "lg" \| "sm"`	`'default'`	Size preset for the status dot.
`pulse`	`boolean`	`false`	Whether to show a pulsing ping animation (only when `online`).
`label`	`string`	`''`	Custom label text; defaults to the status name.
`showLabel`	`boolean`	`false`	Whether to render the label visibly; otherwise it stays screen-reader only.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.