StatusPill
Compact status indicator with five semantic states: ok, warn, err, idle, and info. Each state maps to a default label (Healthy, Degraded, Down, Idle, Info) that can be overridden via the label prop.
<StatusPill status="ok" /><StatusPill status="ok" />
<StatusPill status="warn" />
<StatusPill status="err" />
<StatusPill status="idle" />
<StatusPill status="info" label="Custom label" />
import type * as React from 'react'
interface StatusPillProps {
status: 'ok' | 'warn' | 'err' | 'idle' | 'info'
label?: string
}
const statusLabels: Record<StatusPillProps['status'], string> = {
ok: 'Healthy',
warn: 'Degraded',
err: 'Down',
idle: 'Idle',
info: 'Info',
}
export function StatusPill({ status, label }: StatusPillProps): React.JSX.Element {
return (
<span className={`mdn-status-pill ${status}`}>
{label ?? statusLabels[status]}
</span>
)
}
Button
Dashboard button with primary (solid), secondary (outline), and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Status badge with six color variants: ice, green, amber, red, violet, and surface. Designed for dashboard labels, status indicators, and category tags.
Text
Polymorphic text primitive with body, caption, label, code, and mono variants. Renders as any block or inline HTML tag via the `as` prop.
Card
Composable card with Card, CardHeader, and CardBody sub-components. Uses `mdn-card` CSS classes for consistent dashboard panel styling.