Live badge
The 4.0 name of the status badge — same look, the tone live read as active.
Web — React, from @krizaka/orochia-design-system. The Orochia mobile app takes the kit's tokens, not its components. Deprecated: kept for the apps that still use it, removed in its next major.
DeprecatedSince 4.1.0, removed in 5.0.0. Use instead: Status badge.
Why it exists above Krizaka UI
Kept so that apps written against 4.0 keep building. Orochia has no live streaming and never says "live": the component and its tone were renamed.
Built onBadge
When to use
- Never in new code: write
StatusBadge(tone="live"becomestone="active"; the other tones are the same).
When not to use
- Anywhere: it is deprecated.Use instead: Status badge
Installation
Install
npm install @krizaka/orochia-design-system @krizaka/ui && npm install -D tailwindcss @krizaka/tailwindStyles
@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 { LiveBadge } from "@krizaka/orochia-design-system";Props
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | The words of the status, in the app's language: Open, Funded, Ends in 2 h. Never "live" — Orochia has no live streaming. |
className | string | — | Extra classes, merged last (placement on a card: absolute top-3 left-3). |
tone | LiveBadgeTone | live | The tone; live (the default) is read as active. |
Accessibility
- The same as
StatusBadge: it renders one.
Best practices
- Migrate with a search:
LiveBadge→StatusBadge,tone="live"→tone="active"(or drop it:activeis the default).
Related components
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