A live countdown badge for launches and limited offers, SSR safe with a finished state.
The import and the props worth knowing about, in one place.
import { Badge18 } from "@/components/beste/component/badge18";
<Badge18 target="2027-01-01T00:00:00Z" label="Launch in" />
<Badge18
target="2026-12-24T18:00:00Z"
label="Early bird ends in"
finishedText="Offer ended" // shown once the target passes
tone="primary" // "foreground" (default) | "primary"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
target* | string | — | Target date-time, ISO string (e.g. "2027-01-01T00:00:00Z") |
label | string | — | Muted label before the numbers (e.g. "Launch in") |
finishedText | string | — | Shown once the target has passed |
tone | "foreground" | "primary" | — | Number color |
className | string | — | Additional classes merged onto the root |