Data Display

Badges, tags, key-value pairs, and status indicators. All use Berkeley Mono (label/data fonts) for that exposed-mechanism feel. Built with component tokens.

Badge

Semantic status labels. Pill-shaped, mono font, color-coded by meaning.

NEUTRAL Neutral

INFO Info

SUCCESS Success

WARNING Warning

ERROR Error

WITH DOT With dot indicator

VERIFIED With icon

IN CONTEXT

Build #1247 PASSED

Build #1246 FAILED

Build #1245 TIMEOUT

Tag

Categorization labels. Bordered, removable. Less semantic than badges.

DESIGN Default

FRONTEND Default

REMOVABLE Removable

IN CONTEXT

SVELTE TYPESCRIPT CSS

Key-Value Pair

Structured data display. Key in mono label, value in mono data. Stacked or inline.

STACKED

STATUS Active

CREATED 2026-02-14

OWNER [email protected]

VERSION 1.4.2

INLINE

PLAN Pro

USERS 12

STORAGE 48.2 GB

REGION eu-west-1

Status Indicator

Colored dot with label. Used for real-time status, system health, presence.

ACTIVE

INACTIVE

PENDING

ERROR

IN CONTEXT

api.aiaiai.pt OPERATIONAL

cdn.aiaiai.pt DEGRADED

db.aiaiai.pt OPERATIONAL

TOKEN REFERENCE

Data display components use component tokens from components.css:

--badge-font: var(--type-label-font)--badge-radius: var(--radius-pill)--tag-font: var(--type-label-font)--tag-radius: var(--radius-sm)--kv-key-font: var(--type-label-font)--kv-value-font: var(--type-data-font)--status-dot-size: 8px--status-font: var(--type-label-font)