Status & Trend Badges

Shared dashboard badges for deployment states, content statuses, and metric changes.

These examples render the actual @notra/ui components used by the dashboard and its internal design system. Status and trend badges share the same sizes, rounded corners, spacing, and semantic color tokens.

import { BadgeShowcase } from "@notra/ui/components/badge-showcase";

export default function BadgeShowcaseExample() {
  return (
    <div className="w-full max-w-2xl p-6">
      <BadgeShowcase />
    </div>
  );
}

Status

StatusBadge uses a rounded medium badge. Pass an appearance with a semantic variant, an optional Hugeicons icon, and square: true for a filled result icon.

import { Tick02Icon } from "@hugeicons/core-free-icons";
import { StatusBadge } from "@notra/ui/components/status-badge";

<StatusBadge
  appearance={{ variant: "success", icon: Tick02Icon, square: true }}
  label="Successful"
/>

Use secondary for neutral states, info for queued work, warning for work in progress, success for successful outcomes, and destructive for failures. Keep durations outside the badge.

Trends

TrendBadge accepts tone="up", "down", or "flat" and uses the same colors as status badges. The caller formats and localizes the value; tone describes whether the change is beneficial, so a better ranking can be green even when its numeric delta is negative.

import { TrendBadge } from "@notra/ui/components/trend-badge";

<TrendBadge tone="up">+12.4%</TrendBadge>
<TrendBadge tone="down">−3.2%</TrendBadge>
<TrendBadge tone="flat">0%</TrendBadge>
<TrendBadge showIcon={false} tone="up">New</TrendBadge>
<TrendBadge appearance="plain" tone="up">12.4%</TrendBadge>

Positive trends use a diagonal up-right arrow; negative trends use a down-right arrow. Flat trends keep a minus. Use appearance="plain" for inline readouts without a badge background.

Badges support sm, default, and md sizes and rounded or pill shapes. These imports are workspace components, not a standalone shadcn registry installation.