Status Indicator - HapplyUI

Status indicators designed for avatar corners. Top-position variants include verified badge, pin, favorite, add, remove, and notification. Bottom-position variants include online, offline, busy, away, and company logo.

Installation

bunx @happlyui/cli@latest add status-indicator

Dependencies

npm packages

@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

tv
happly-ui-utils

Usage

import * as StatusIndicator from "@/components/ui/status-indicator"

<StatusIndicator.Root status="online" />

Examples

Top Variants

Status indicators for the top-right corner: verified badge, pin, favorite, add, remove, and notification.

import * as StatusIndicator from '@/components/ui/status-indicator'

<StatusIndicator.Root status="verified" />
<StatusIndicator.Root status="pin" />
<StatusIndicator.Root status="favorite" />
<StatusIndicator.Root status="add" />
<StatusIndicator.Root status="remove" />
<StatusIndicator.Root status="notification" />

Bottom Variants

Status indicators for the bottom-right corner: online, offline, busy, away, and company. The company variant accepts children for a custom logo.

import * as StatusIndicator from '@/components/ui/status-indicator'

<StatusIndicator.Root status="online" />
<StatusIndicator.Root status="offline" />
<StatusIndicator.Root status="busy" />
<StatusIndicator.Root status="away" />
<StatusIndicator.Root status="company">
  <img src="logo.png" className="h-full w-full rounded-full object-cover" />
</StatusIndicator.Root>

API Reference

StatusIndicator.Root

The status indicator element. Renders a default icon based on the status variant. Pass children to override the default content (useful for company logos).

Prop	Type	Default	Description
`status`	`'verified' \| 'pin' \| 'favorite' \| 'add' \| 'remove' \| 'notification' \| 'online' \| 'offline' \| 'busy' \| 'away' \| 'company'`	`'online'`	The type of status indicator to display.