mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-01 15:03:57 +08:00

Files

catlog22 2fb93d20e0 feat: add queue management and terminal dashboard documentation in Chinese

- Introduced comprehensive documentation for the queue management feature, detailing its pain points, core functionalities, and component structure.
- Added terminal dashboard documentation, highlighting its layout, core features, and usage examples.
- Created an index page in Chinese for Claude Code Workflow, summarizing its purpose and core features, along with quick links to installation and guides.

2026-03-01 10:52:46 +08:00

2.6 KiB

Raw Blame History

title, description, sidebar

title	description	sidebar
Badge	Small status or label component for visual categorization	auto

Badge

Overview

The Badge component is used to display status, categories, or labels in a compact form. It's commonly used for tags, status indicators, and counts.

Live Demo

:::demo badge-variants Shows all available badge variants including default, secondary, destructive, outline, success, warning, info, review, and gradient :::

Props

Variants

Default

Primary badge with theme color background. Used for primary labels and categories.

Secondary

Muted badge for secondary information.

Destructive

Red badge for errors, danger states, or negative status.

Outline

Badge with only text and border, no background. Used for subtle labels.

Success

Green badge for success states, completed actions, or positive status.

Warning

Yellow/amber badge for warnings, pending states, or caution indicators.

Info

Blue badge for informational content or neutral status.

Review

Purple badge for review status, pending review, or feedback indicators.

Gradient

Badge with brand gradient background for featured or highlighted items.

Usage Examples

Basic Badge

<Badge>Default</Badge>

Status Indicators

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Failed</Badge>
<Badge variant="info">Draft</Badge>

Count Badge

<div class="relative">
  <Bell />
  <Badge variant="destructive" class="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs">
    3
  </Badge>
</div>

Category Tags

<div class="flex gap-2">
  <Badge variant="outline">React</Badge>
  <Badge variant="outline">TypeScript</Badge>
  <Badge variant="outline">Tailwind</Badge>
</div>

Review Status

<Badge variant="review">In Review</Badge>

Gradient Badge

<Badge variant="gradient">Featured</Badge>

2.6 KiB Raw Blame History