Data display

Badge

Labels a compact status, category, or piece of metadata.

@dawn/ui/components/badge

Preview

Rendered from @dawn/ui

DefaultSecondaryDawnConfirmedPendingCancelledDraft

Usage

import { Badge } from "@dawn/ui/components/badge";

export const Statuses = () => (
  <div className="flex flex-wrap gap-2">
    <Badge variant="success">Confirmed</Badge>
    <Badge variant="warning">Pending</Badge>
    <Badge variant="outline">Draft</Badge>
  </div>
);

API

variantdefault | secondary | destructive | brand | success | warning | outline | ghost | link: Sets the semantic color and emphasis.
asChildboolean: Applies badge styling to the single child element.

Exports

BadgebadgeVariants