Badge
胶囊形标签，默认使用主题色浅底。
新推荐草稿● 已上线
import { Badge } from '@/components/ui/card';
export default function BadgeDemo() {
return (
<div className="flex flex-wrap items-center justify-center gap-2">
<Badge>新</Badge>
<Badge>推荐</Badge>
<Badge className="bg-ghost-selected text-text-secondary">草稿</Badge>
<Badge className="bg-transparent text-success shadow-[inset_0_0_0_1px_var(--cds-border)]">● 已上线</Badge>
</div>
);
}
安装
import type { HTMLAttributes } from 'react';
import { twMerge } from 'tailwind-merge';
/** 12px 同心圆角 + 发丝边；卡片内部的按钮/chip 不再加边框（单线框纪律） */
export function Card({ className, ...p }: HTMLAttributes<HTMLDivElement>) {
return <div className={twMerge('rounded-xl bg-surface-2 shadow-panel', className)} {...p} />;
}
export function Badge({ className, ...p }: HTMLAttributes<HTMLSpanElement>) {
return (
<span
className={twMerge(
'inline-flex h-5 items-center rounded-full bg-accent-soft px-2 text-[11px] font-medium text-accent-text',
className,
)}
{...p}
/>
);
}
用法
<Badge>推荐</Badge>