unnamed-ui
基础

Status Tag

Status tag component for displaying various status indicators

待确认已确认成功失败警告提示
"use client";

import { StatusTag } from "@/components/composed/status-tag/status-tag";

export function StatusTagDemo() {
  return (
    <div className="flex flex-wrap gap-3">
      <StatusTag status="pending" />
      <StatusTag status="confirmed" />
      <StatusTag status="success" />
      <StatusTag status="error" />
      <StatusTag status="warning" />
      <StatusTag status="info" />
    </div>
  );
}

Status Tag 组件用于显示各种状态信息，支持预设状态和自定义样式，适用于订单状态、审批流程、任务进度等场景。

概述

  • 预设状态：内置多种常用状态样式（待确认、已确认、成功、失败等）
  • 自定义样式：支持自定义文本、背景色和文本颜色
  • 轻量级：纯原语组件构建，无额外依赖
  • 类型安全：完整的 TypeScript 类型定义
  • 响应式：自适应不同场景和尺寸

快速开始

import { StatusTag } from "@/registry/wuhan/composed/status-tag";

export function Example() {
  return (
    <div className="flex gap-2">
      <StatusTag status="pending" />
      <StatusTag status="confirmed" />
      <StatusTag status="success" />
    </div>
  );
}

特性

  • 多种预设状态：pending（待确认）、confirmed（已确认）、success（成功）、error（失败）、warning（警告）、info（提示）
  • 完全自定义：可自定义文本和样式，不受预设限制
  • 灵活组合：支持预设与自定义的混合使用
  • 语义化：清晰的状态类型定义，代码可读性强

安装

pnpm dlx shadcn@latest add http://localhost:3000/r/wuhan/status-tag.json

代码演示

预设状态

基础预设状态展示。

待确认:待确认
已确认:已确认
成功:成功
失败:失败
警告:警告
提示:提示
"use client";

import { StatusTag } from "@/components/composed/status-tag/status-tag";

export function StatusTagDefault() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-20">待确认:</span>
        <StatusTag status="pending" />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-20">已确认:</span>
        <StatusTag status="confirmed" />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-20">成功:</span>
        <StatusTag status="success" />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-20">失败:</span>
        <StatusTag status="error" />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-20">警告:</span>
        <StatusTag status="warning" />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-20">提示:</span>
        <StatusTag status="info" />
      </div>
    </div>
  );
}

自定义样式

自定义样式的状态标签。

进行中:进行中
已归档:已归档
VIP:VIP
热门:热门
已售罄:已售罄
"use client";

import { StatusTag } from "@/components/composed/status-tag/status-tag";

export function StatusTagCustom() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-24">进行中:</span>
        <StatusTag
          text="进行中"
          bgColor="bg-purple-50"
          textColor="text-purple-700"
        />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-24">已归档:</span>
        <StatusTag
          text="已归档"
          bgColor="bg-gray-100"
          textColor="text-gray-600"
        />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-24">VIP:</span>
        <StatusTag
          text="VIP"
          bgColor="bg-gradient-to-r from-amber-50 to-orange-50"
          textColor="text-orange-700"
        />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-24">热门:</span>
        <StatusTag text="热门" bgColor="bg-rose-50" textColor="text-rose-700" />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-24">已售罄:</span>
        <StatusTag
          text="已售罄"
          bgColor="bg-slate-100"
          textColor="text-slate-500"
        />
      </div>
    </div>
  );
}

混合使用

预设和自定义混合使用。

订单待确认:待确认
支付成功:支付成功
审核通过:审核通过
发货中:发货中
配送失败:配送失败
即将过期:即将过期
"use client";

import { StatusTag } from "@/components/composed/status-tag/status-tag";

export function StatusTagMixed() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-32">订单待确认:</span>
        <StatusTag status="pending" />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-32">支付成功:</span>
        <StatusTag status="success" text="支付成功" />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-32">审核通过:</span>
        <StatusTag status="confirmed" text="审核通过" />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-32">发货中:</span>
        <StatusTag
          status="info"
          text="发货中"
          bgColor="bg-cyan-50"
          textColor="text-cyan-700"
        />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-32">配送失败:</span>
        <StatusTag status="error" text="配送失败" />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground w-32">即将过期:</span>
        <StatusTag status="warning" text="即将过期" />
      </div>
    </div>
  );
}

API

StatusTag

状态标签主组件，支持预设状态和完全自定义。

Props

PropTypeDefaultDescription
statusStatusType-预设状态类型（可选）
textstring-自定义文本（优先级高于 status）
bgColorstring-自定义背景色 Tailwind 类名（优先级高于 status）
textColorstring-自定义文本色 Tailwind 类名（优先级高于 status）
classNamestring-额外的样式类名

Example

import { StatusTag } from "@/registry/wuhan/composed/status-tag";

function OrderStatus() {
  return (
    <div className="flex flex-col gap-2">
      {/* 使用预设状态 */}
      <StatusTag status="pending" />
      <StatusTag status="confirmed" />
      
      {/* 完全自定义 */}
      <StatusTag
        text="进行中"
        bgColor="bg-purple-50"
        textColor="text-purple-700"
      />
      
      {/* 混合使用：使用预设状态但自定义文本 */}
      <StatusTag status="success" text="审核通过" />
    </div>
  );
}

StatusType

预设状态类型定义。

type StatusType = 
  | "pending"      // 待确认
  | "confirmed"    // 已确认
  | "success"      // 成功
  | "error"        // 失败
  | "warning"      // 警告
  | "info";        // 提示

预设状态样式

StatusTextBackgroundText Color
pending待确认白色#666473
confirmed已确认#E2F8EC#06BA7E
success成功green-50green-700
error失败red-50red-700
warning警告amber-50amber-700
info提示blue-50blue-700

使用场景

  • 订单状态：订单的待确认、已确认、已发货、已完成等状态
  • 审批流程：审批中、已通过、已拒绝等状态
  • 任务进度：待处理、进行中、已完成、已取消等状态
  • 消息通知：信息、成功、警告、错误等提示
  • 用户状态：在线、离线、忙碌等状态
  • 支付状态：待支付、已支付、已退款等状态

最佳实践

  1. 语义化使用：选择符合业务语义的状态类型
  2. 颜色一致性：自定义颜色时保持与设计系统的一致性
  3. 文本简洁：状态文本应简短明了，通常 2-4 个字
  4. 对比度：确保文本与背景有足够的对比度
  5. 上下文提示：在列表或表格中使用时，配合其他信息提供完整上下文

注意事项

  • text 属性优先级高于 status，可以覆盖预设文本
  • bgColor 和 textColor 应使用 Tailwind CSS 类名
  • 如果同时提供 status 和自定义颜色，自定义颜色会覆盖预设颜色
  • 不提供 status 时，建议同时提供 text、bgColor 和 textColor

原语组件

Status Tag 基于以下原语组件构建：

  • StatusTagPrimitive - 状态标签容器原语

原语组件提供了基础的样式和结构，可以在 registry/wuhan/blocks/status-tag/status-tag-01.tsx 中找到。

样式定制

组件使用 Tailwind CSS，可以通过以下方式定制：

// 通过 className 添加额外样式
<StatusTag 
  status="pending" 
  className="shadow-md hover:shadow-lg transition-shadow"
/>

// 自定义颜色
<StatusTag
  text="VIP"
  bgColor="bg-gradient-to-r from-purple-50 to-pink-50"
  textColor="text-purple-700"
/>

扩展示例

带图标的状态标签

import { StatusTag } from "@/registry/wuhan/composed/status-tag";
import { CheckCircle, Clock, XCircle } from "lucide-react";

function StatusWithIcon() {
  return (
    <div className="flex items-center gap-2">
      <Clock className="w-4 h-4" />
      <StatusTag status="pending" />
    </div>
  );
}

可点击的状态标签

import { StatusTag } from "@/registry/wuhan/composed/status-tag";

function ClickableStatus() {
  return (
    <button onClick={() => console.log("clicked")}>
      <StatusTag 
        status="pending" 
        className="cursor-pointer hover:opacity-80 transition-opacity"
      />
    </button>
  );
}

Tag

Versatile tag component with multiple variants, themes, and interactive features

Progress

进度条组件，用于展示操作进度，支持线性和圆形两种样式

On this page

概述快速开始特性安装代码演示预设状态自定义样式混合使用APIStatusTagPropsExampleStatusType预设状态样式使用场景最佳实践注意事项原语组件样式定制扩展示例带图标的状态标签可点击的状态标签