Downcity
Components

Badge

Use for status labels, taxonomy labels, and lightweight markers

Badge

Badge is used for short status labels and lightweight metadata.

Import

import { Badge } from "@downcity/ui";

Basic Example

import { Badge } from "@downcity/ui";

export function StatusBadge() {
  return <Badge variant="secondary">Running</Badge>;
}

Variants

  • default
  • secondary
  • destructive
  • outline
  • ghost
  • link

Common Pattern

import { Badge, Card, CardContent } from "@downcity/ui";

export function AgentCard() {
  return (
    <Card className="max-w-sm">
      <CardContent className="flex items-center justify-between">
        <span>Research Agent</span>
        <Badge variant="secondary">Online</Badge>
      </CardContent>
    </Card>
  );
}

Usage Notes

  • Use secondary or destructive for state
  • Use outline for category labels
  • Do not use Badge as a primary action control

Button

Use for primary actions, secondary actions, toolbar controls, and icon buttons

Card

Use for structured information blocks, settings panels, and content containers

Table of Contents

BadgeImportBasic ExampleVariantsCommon PatternUsage Notes