Badge

Data Display

Small status label with color variants: default, secondary, destructive, success, warning, outline.

Six status variants

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

badge.tsx

"use client";

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

export default function BadgeExample() {
  return (
    <div className="flex flex-wrap gap-3">
      {(
        [
          "default",
          "secondary",
          "success",
          "warning",
          "destructive",
          "outline",
        ] as const
      ).map((variant) => (
        <Badge key={variant} variant={variant}>
          {variant}
        </Badge>
      ))}
    </div>
  );
}

Usage

Use badges for short statuses, counts, and metadata. Keep the wording concise and use the same status colors throughout the application.

Import

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

Available in the included @dashboardpack/core package. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Badge props
Prop	Type / Default	Description
variant	`default \| secondary \| destructive \| success \| warning \| outline` Default: default	Semantic badge appearance.
className	`string` Default: —	Extend spacing or shape.
children	`ReactNode` Default: —	The visible status or count.

Build with these too

Avatar Table