Web + MobileStableData display

Web and mobile — the same component for React and React Native. Stable: its API only changes in a major version.

When to use

To label the state of an item: paid, pending, new, live, ending soon.
On a media (tone="scrim"): a duration, a quality, a live marker.
With a dot (and pulse) for something happening now.

When not to use

For something the user can click or select.Use instead: Chip
For a message the user must read.Use instead: Alert
For a key figure with a trend.Use instead: Stat

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Badge } from "@krizaka/ui/badge";

Examples

Neutral

The default tone.

New

import { Badge } from "@krizaka/ui/badge";

export default function BadgeNeutral() {
  return <Badge>New</Badge>;
}

Accent

To highlight: new, featured.

New

import { Badge } from "@krizaka/ui/badge";

export default function BadgeAccent() {
  return (
    <Badge tone="accent" dot>
      New
    </Badge>
  );
}

Success

A good state: paid, verified.

Paid

import { Badge } from "@krizaka/ui/badge";

export default function BadgeSuccess() {
  return (
    <Badge tone="success" dot>
      Paid
    </Badge>
  );
}

Warning

A state that needs attention soon.

Pending

import { Badge } from "@krizaka/ui/badge";

export default function BadgeWarning() {
  return (
    <Badge tone="warning" dot>
      Pending
    </Badge>
  );
}

Danger with pulse

Urgent, happening now: the dot pulses.

Ends soon

import { Badge } from "@krizaka/ui/badge";

export default function BadgeDanger() {
  return (
    <Badge tone="danger" dot pulse>
      Ends soon
    </Badge>
  );
}

On a media

tone="scrim": the veil and the text are identical in both themes.

import { Badge } from "@krizaka/ui/badge";

// On a media: the veil and the text are invariant, identical in both themes.
export default function BadgeScrim() {
  return (
    <div className="flex h-24 w-40 items-start bg-media p-2.5">
      <Badge tone="scrim">4K</Badge>
    </div>
  );
}

Medium

size="md" for a badge next to a heading.

Featured

import { Badge } from "@krizaka/ui/badge";

export default function BadgeMedium() {
  return (
    <Badge tone="accent" size="md">
      Featured
    </Badge>
  );
}

Props

Prop	Type	Default	Description
`dot`	`boolean`	—	A small dot before the text, in the tone's colour (pulsing with `pulse`).
`pulse`	`boolean`	—	Makes the `dot` pulse (stopped under reduced motion).
`size`	`"sm" \| "md"`	`sm`	sm · md.
`tone`	`"success" \| "warning" \| "danger" \| "neutral" \| "accent" \| "scrim"`	`neutral`	neutral · accent · success · warning · danger (soft tints, the text stays a text role) · scrim (on a media).

Accessibility

A plain <span>: its text is read with the content around it; the dot is decorative.
The colour is never the only signal: the words say the state.
The pulse stops under prefers-reduced-motion.

Best practices

One or two words: a badge is scanned, not read.
Keep the tone meaningful: success, warning, danger for states; accent to highlight; neutral otherwise.
pulse only for what is live: a page full of pulsing dots says nothing.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Badge