Krizaka
Documentation
UI

Status badge

The state of an auction, a challenge or a drop: a pill with a dot that pulses while something is moving.

WebStableData display

Web — React, from @krizaka/orochia-design-system. The Orochia mobile app takes the kit's tokens, not its components. Stable: its API only changes in a major version.

Why it exists above Krizaka UI

Orochia's money moves through states — an auction opens and closes, a challenge takes pledges, gets funded, is delivered. Badge from @krizaka/ui knows tones, not states: this badge maps each state to one tone and one motion, so the same moment reads the same on every screen. It also carries the product's vocabulary rule: Orochia has no live streaming, so nothing is ever "live" — what moves is active.

Built onBadge

When to use

  • On an auction card or panel: active while bids are taken, muted once it is over.
  • On a challenge: active while it takes pledges or is in progress, upcoming while it closes, success once funded or delivered.
  • On a drop or a scheduled release: upcoming until it opens.

When not to use

  • For a plain label without a state (a category, a quality, a duration on a media).Use instead: Badge
  • For a filter the user can pick.Use instead: Chip
  • For the time left before the end: show the countdown itself.Use instead: Countdown

Installation

Install

npm install @krizaka/orochia-design-system @krizaka/ui && npm install -D tailwindcss @krizaka/tailwind

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";
@import "@krizaka/orochia-design-system/theme.css";
@import "@krizaka/tokens/brands/orochia.css";

Import

import { StatusBadge } from "@krizaka/orochia-design-system";

Examples

An open auction

active: bids are being taken — the accent, the dot pulses.

Open · 4 bids

A challenge, stage by stage

The four tones on the stages of a challenge: taking pledges, closing, funded, ended.

Taking pledgesCloses in 2 hFundedEnded

On a media card

Placed in the corner of a cover, over a dark veil — the badge reads on the image in both themes.

Ends soon

Golden hour session — signed print

Props

The status of an auction, a challenge or a drop, as a pill with a dot, on Badge (@krizaka/ui). The words come from the app (label). State: data-tone (the Badge tone) and data-status (this tone).

PropTypeDefaultDescription
labelrequiredstring—The words of the status, in the app's language: Open, Funded, Ends in 2 h. Never "live" — Orochia has no live streaming.
classNamestring—Extra classes, merged last (placement on a card: absolute top-3 left-3).
tone"active" | "success" | "upcoming" | "muted"activeactive: something moving now (an open auction, a challenge taking pledges) — the accent with a pulsing dot (still under prefers-reduced-motion); upcoming: about to move, the accent without the pulse; success: settled well (sold, funded, delivered); muted: over.

Accessibility

  • A plain <span>: its label is read with the content around it; the dot is decorative.
  • The colour is never the only signal: the label says the state.
  • The pulse stops under prefers-reduced-motion.
  • data-status carries the tone for styles and tests.

Best practices

  • Never write "live" in the label: Orochia has no live streaming. Say what is happening — Open, Taking pledges, Ends soon.
  • One state per item: a card carries one status badge, placed in a corner of its media (className="absolute top-3 left-3").
  • Pulse is for what moves now (active) — a page where every badge pulses says nothing.
  • The words come from the app's messages: the badge takes label, it never translates.

Generated from the code of @krizaka/orochia-design-system 4.1.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Social icon

Previous

Live badge (deprecated)

Next

On this page

Why it exists above Krizaka UIWhen to useInstallationExamplesPropsAccessibilityBest practicesRelated components