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
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
Code Block
Formatted code display with optional line numbers and copy button. Syntax highlighting is the consumer's responsibility.
WITH LINE NUMBERS
| SELECT id, name, email |
| FROM users |
| WHERE active = true |
| ORDER BY created_at DESC |
| LIMIT 50; |
WITHOUT LINE NUMBERS
| pip install aiaiai-sdk |
WITH COPY BUTTON
| export AIAIAI_API_KEY=sk-xxxxx |
| export AIAIAI_ENDPOINT=https://api.aiaiai.pt |
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)--code-font: var(--type-data-font)--code-bg: var(--color-surface-secondary)--code-radius: var(--radius-sm)--code-line-number-color: var(--color-text-muted)