Timeline Status Badge

A preconfigured badge for lifecycle timeline statuses with consistent colors, icons, and labels. Composes Badge internally.

Installation

bunx @happlyui/cli@latest add timeline-status-badge

Dependencies

npm packages

@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

badge

Usage

import TimelineStatusBadge from "@/components/ui/timeline-status-badge"

<TimelineStatusBadge status="open" />

Examples

Open

Green badge indicating an open/active status.

Open

<TimelineStatusBadge status="open" />

Opening Soon

Purple badge indicating a status that will open soon.

Opening Soon

<TimelineStatusBadge status="open_soon" />

Closing Soon

Yellow badge indicating a status that is closing soon.

Closing Soon

<TimelineStatusBadge status="closing_soon" />

Closed

Red badge indicating a closed status.

Closed

<TimelineStatusBadge status="closed" />

Medium Size

All statuses at medium size.

Open

Opening Soon

Closing Soon

Closed

<TimelineStatusBadge status="open" size="medium" />

All Statuses

All four timeline statuses side by side.

Open

Opening Soon

Closing Soon

Closed

<TimelineStatusBadge status="open" />
<TimelineStatusBadge status="open_soon" />
<TimelineStatusBadge status="closing_soon" />
<TimelineStatusBadge status="closed" />

Custom Label

Override the default label via children for i18n or custom text.

Ouvert

<TimelineStatusBadge status="open">Ouvert</TimelineStatusBadge>

API Reference

TimelineStatusBadge

A preconfigured Badge that maps timeline lifecycle statuses to colors, icons, and labels.

Prop	Type	Default	Description
`status`	`'open' \| 'open_soon' \| 'closing_soon' \| 'closed'`	-	The lifecycle timeline status
`size`	`'small' \| 'medium'`	`'small'`	The size of the badge
`children`	`React.ReactNode`	-	Override the default label (useful for i18n)