Components / Status

Badge

Compact mono label for statuses in tables and headers. StatusBadge picks the tone from a lifecycle word such as resolved, pending or failed.

Extracted fromExplorer

Import

tsx
import { Badge, StatusBadge, STATUS_TONES } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { Badge, StatusBadge, STATUS_TONES } from "@somnia-chain/ui/next"

Examples

Tones

NeutralAccentUpWarnDown
examples/badge/tones.tsxShow code
tsx
import { Badge } from "@somnia-chain/ui"

export default function BadgeTones() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge>Neutral</Badge>
      <Badge tone="accent">Accent</Badge>
      <Badge tone="up">Up</Badge>
      <Badge tone="warn">Warn</Badge>
      <Badge tone="down">Down</Badge>
    </div>
  )
}

StatusBadge

resolvedscheduledpendingresolvingdegradedfailedvoided
examples/badge/status.tsxShow code
tsx
import { StatusBadge } from "@somnia-chain/ui"

const STATUSES = ["resolved", "scheduled", "pending", "resolving", "degraded", "failed", "voided"]

export default function StatusBadges() {
  return (
    <div className="flex flex-wrap gap-2">
      {STATUSES.map((s) => (
        <StatusBadge key={s} status={s} />
      ))}
    </div>
  )
}

Props

Badge

PropTypeDefaultDescription
tone"neutral" | "accent" | "up" | "warn" | "down""neutral"Color.
...props<span> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <span>.

StatusBadge

PropTypeDefaultDescription
statusstring—Shown as-is; its tone comes from STATUS_TONES, else neutral.
...props<span> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <span>.