ASCII badge

Installation

Usage

Copyimport { AsciiBadge } from "@/components/asciicn/ascii-badge";
 
export function BuildStatus() {
  return <AsciiBadge tone="ok">OK</AsciiBadge>;
}

shape sets the glyphs around the label: square ([ OK ]), angle (< beta >), round (( new )), pipe (┤ v2 ├) or inverse, a solid label in reverse video.

tone sets the colour from the --ascii-color-* palette: neutral is ink, ok green, info blue, warn orange, error red and accent purple. Pass color to use any other colour.

By default the label has one cell of space each side. Set width to centre it in at least that many cells instead, so a column of badges lines up: with width={4}, OK and WARN both draw six cells wide, as [ OK ] and [WARN].

dot puts a ● before the label that opens out to ◉ and ◎ and back, for states that are live or running.

Examples

Boot log

Badges at width={6}, so every line of the log starts its text in the same column.

Shapes and labels

Each shape once, then badges next to feature names, one with a live dot.

Props

Notes

• The brackets and chevrons are hidden from screen readers, which read the label alone. Write labels that make sense without the colour, such as FAIL rather than a red ●.
• The badge is a span of DOM text in --ascii-font, so it sits on the text baseline and can be selected and copied.
• The live dot swaps one glyph six times a second, pauses offscreen and in hidden tabs, and holds a solid ● with reduced motion.