Components

Presence

An online / away / busy / offline status dot, optionally pinned to an avatar.

php artisan blatui:add presence

Online Away Busy Offline

<div class="flex flex-wrap items-center gap-6">
    <x-ui.presence status="online" show-label />
    <x-ui.presence status="away" show-label />
    <x-ui.presence status="busy" show-label />
    <x-ui.presence status="offline" show-label />
</div>

On Avatar

{{-- The presence dot composes onto an avatar corner via a relative wrapper. --}}
<div class="relative inline-flex">
    <x-ui.avatar class="size-12">
        <x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
        <x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
    </x-ui.avatar>

    <x-ui.presence status="online" class="absolute end-0 bottom-0" />
</div>

Pulse

Online

<x-ui.presence status="online" :pulse="true" show-label />

API Reference

Props, slots and exposed methods for <x-ui.presence>.

Props

Prop	Type	Default	Description
`status`	`string`	`'online'`	The presence state, which sets the dot colour and the default status label. `online` `away` `busy` `offline`
`size`	`string`	`'default'`	Diameter of the status dot. `sm` `default` `lg`
`pulse`	`bool`	`false`	Render an animated ping halo around the dot (only applied when status is online). Disabled under prefers-reduced-motion.
`label`	`string`	—	Override the status text. Defaults to a human label for the status (e.g. "Online"). Always announced to screen readers even when not visible.
`showLabel`	`bool`	`false`	Show the label text beside the dot. When false the label remains as sr-only text so the state is never conveyed by colour alone.