ChatStatus

Presence indicator dot with optional label, supporting online, offline, away, busy, and do-not-disturb states with pulse animation.

View source Installation

Preview

All States

OnlineAwayBusyDo not disturbOffline

Sizes

OnlineOnlineOnline

Pulse Animation

Online

Dot Only

Import

import { ChatStatus } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
variant	`'online' \| 'offline' \| 'away' \| 'busy' \| 'dnd'`	`'offline'`	Presence state.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the indicator dot.
showLabel	`boolean`	`false`	Show text label next to the dot.
pulse	`boolean`	`false`	Animate the dot when online.

Examples

All States

import { ChatStatus } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
      <ChatStatus variant="online" showLabel />
      <ChatStatus variant="away" showLabel />
      <ChatStatus variant="busy" showLabel />
      <ChatStatus variant="dnd" showLabel />
      <ChatStatus variant="offline" showLabel />
    </div>
  )
}

Sizes with Pulse

import { ChatStatus } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
      <ChatStatus variant="online" size="sm" pulse />
      <ChatStatus variant="online" size="md" pulse />
      <ChatStatus variant="online" size="lg" pulse />
    </div>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */