Badges & Pills

Status Badges

Built-in (Current)

built-in

Running

Latest

New

new

Passed

PASSED

Failed

FAILED

Pending

PENDING

Outdated

v1.0

Event Type Badges

ERROR

TOOL

TEXT

RUN

ACTIVITY

Span Category Pills

LLM

Agent

Tool Calls

Error(s)

Alert Banners

⚠️

Warning Banner

This is a warning message

❌

Error Banner

This is an error message

✓

Success Banner

This is a success message

ℹ️

Info Banner

This is an info message

Metric Cards

Accuracy

95.2%

Latency

1.2s

Duration

4m 47s

Error Rate

2.1%

Buttons

Primary Actions

Destructive Actions

Status Indicators

Online

Offline

✓ Success

✗ Error

Typography

Heading 1

text-4xl font-bold

Heading 2

text-2xl font-bold

Heading 3

text-lg font-semibold

Body text - Regular paragraph text that appears throughout the application.

text-base

Secondary text - Used for descriptions and helper text.

text-sm text-slate-600 dark:text-slate-400

Tertiary text - Used for labels and metadata.

text-xs text-slate-500

const example = "code";

Source Code Pro - Monospace font

Color Palette

Primary Colors

Blue 600

#2563eb

OpenSearch Blue

#005EB8

Semantic Colors

Success

green-500

Error

red-500

Warning

yellow-500

Caution

amber-500

Info

purple-500