Status Badge - HapplyUI

A compact status indicator badge with icon or dot variants and semantic status colors.

Installation

bunx @happlyui/cli@latest add status-badge

These are automatically installed when you add this component.

import * as StatusBadge from "@/components/ui/status-badge"

<StatusBadge.Root status="completed">
  <StatusBadge.Dot />
  Badge
</StatusBadge.Root>

Completed status badge in stroke and light variants, with icon and dot.

Badge

<StatusBadge.Root status="completed">
  <StatusBadge.Icon as={RiCheckboxCircleFill} />
  Badge
</StatusBadge.Root>

Pending status badge in stroke and light variants, with icon and dot.

Badge

<StatusBadge.Root status="pending">
  <StatusBadge.Icon as={RiAlertFill} />
  Badge
</StatusBadge.Root>

Failed status badge in stroke and light variants, with icon and dot.

Badge

<StatusBadge.Root status="failed">
  <StatusBadge.Icon as={RiErrorWarningFill} />
  Badge
</StatusBadge.Root>

Disabled status badge in stroke and light variants, with icon and dot.

Badge

<StatusBadge.Root status="disabled">
  <StatusBadge.Icon as={RiForbidFill} />
  Badge
</StatusBadge.Root>

Renders the badge as a child element (e.g. a button) using Radix Slot.

<StatusBadge.Root asChild>
  <button type="button">
    <StatusBadge.Icon as={RiForbidFill} />
    Badge
  </button>
</StatusBadge.Root>

The main status badge container.

Prop	Type	Default	Description
`variant`	`'stroke' \| 'light'`	`'stroke'`	The visual variant of the badge
`status`	`'completed' \| 'pending' \| 'failed' \| 'disabled'`	`'disabled'`	The semantic status color
`asChild`	`boolean`	`false`	Render as child element using Radix Slot

Renders a polymorphic icon inside the badge.

Prop	Type	Default	Description
`as`	`React.ElementType`	-	The icon component to render

Renders a small colored dot indicator inside the badge.

Prop	Type	Default	Description