Reference

Indicators & signaling

badge, tag, status, progress_bar, kbd, divider

badge

Short colored label

Tiny label with a color variant. Use inside cards, next to titles, or anywhere you need a status pip. 5 variants:

Default

Healthy

At risk

Critical

Beta

- type: badge
  label: Healthy
  color: green        # default | green | yellow | red | teal

tag

Monospace label

Pill-shaped decorative tag. Outlined, monospace. Great for categories, topic chips, or code-like labels.

design-system

breaking

stable

- type: tag
  label: design-system
  color: teal          # default | green | yellow | red | teal

status

Dot + label

A colored dot next to a label — the classic Operational / Degraded / Down pattern.

Operational

Degraded

Down

Scheduled maintenance

- type: status
  label: Operational
  color: green          # default | green | yellow | red | teal

progress_bar

Horizontal progress

Linear progress fill with optional label, percentage readout, and trailing detail. Purely static — no indeterminate animation.

Scan coverage94%

94 of 100 accounts connected

Adoption41%

Target 70% by end of Q2

Spam flags12%

- type: progress_bar
  value: 94                  # 0-100
  label: Scan coverage       # optional
  color: green               # default | green | yellow | red | teal
  detail: 94 of 100 accounts # optional

kbd

Keyboard keys

Inline keyboard key styling. Pass a list of keys — they render joined by +. Great in docs and shortcut hints.

Cmd+K

Ctrl+Shift+P

/

- type: kbd
  keys: [Cmd, K]    # renders as Cmd+K

divider

Horizontal rule

Plain horizontal line or line-with-centered-label to break up long pages.

Plain divider above, labeled below:

Operational data

- type: divider             # plain hr

- type: divider             # labeled
  label: Operational data

Next up

Interactive components bring client-side behavior — sortable/filterable tables, tab groups, accordions. All vanilla JS, no framework.

Interactive All components