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.

WebStableAffichage de données

Web — React, depuis @krizaka/orochia-design-system. L'app mobile Orochia prend les tokens du kit, pas ses composants. Stable : son API ne change qu’à une version majeure.

Pourquoi il existe au-dessus de 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.

Repose surBadge

Quand l’utiliser

  • 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.

Quand ne pas l’utiliser

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

Installation

Installer

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";

Importer

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

Exemples

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).

PropTypeDéfautDescription
labelrequisstring—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.

Accessibilité

  • 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.

Bonnes pratiques

  • 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.

Généré depuis le code de @krizaka/orochia-design-system 4.1.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Social icon

Précédent

Live badge (déprécié)

Suivant

Sur cette page

Pourquoi il existe au-dessus de Krizaka UIQuand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés