Badge
A pill label on a soft accent background by default.
NewPopularDraft● Live
import { Badge } from '@/components/ui/card';
export default function BadgeDemo() {
return (
<div className="flex flex-wrap items-center justify-center gap-2">
<Badge>New</Badge>
<Badge>Popular</Badge>
<Badge className="bg-ghost-selected text-text-secondary">Draft</Badge>
<Badge className="bg-transparent text-success shadow-[inset_0_0_0_1px_var(--cds-border)]">● Live</Badge>
</div>
);
}
Installation
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}
/>
);
}
Usage
<Badge>Popular</Badge>