The @krizaka/ui badge with the 1.x variant kept as a deprecated alias of tone.

WebStableData display

Web — React, from @krizaka/orazaka-design-system. The Orazaka 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

Orazaka 1.x badges took variant (default, success…); the platform says tone. This adapter maps one onto the other so the apps keep working while they migrate.

Built onBadge

When to use

In code already importing Badge from @krizaka/orazaka-design-system: a model's state, a job's status.

When not to use

In new code: import Badge from @krizaka/ui/badge and write tone.Use instead: Badge

Installation

Install

npm install @krizaka/orazaka-design-system && npm install -D tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/orazaka-design-system/theme.css";

The package ships its TypeScript sources: add it to transpilePackages (with @krizaka/orazaka-shared and @krizaka/ui).

Import

import { Badge } from "@krizaka/orazaka-design-system";

Examples

A model's state

Local, loading, failed — the tones of the primitive.

Local · readyLoadingFailed

Props

The

Prop	Type	Default	Description
`variant`	`BadgeVariant`	—	@deprecated Since 2.0 — use `tone` (`default` → `neutral`, the other names are the same).

Accessibility

The primitive's: a <span> read with its content; the colour is never the only signal.

Best practices

Write tone, not variant (deprecated since 2.0; default → neutral).
One or two words: Local, Running, Failed.

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

Badge