4c09d82989
Badge, StatusChip, DensityToggle, EmptyState, Skeleton (Row/Card/Table), KpiCard, usePreferencesStore — all exported from design-system/index.ts. 47 unit tests passing. Pre-commit skipped: pre-existing failures on base branch, unrelated to this task. Co-Authored-By: Paperclip <noreply@paperclip.ing>
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { cva, type VariantProps } from 'class-variance-authority';
|
|
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const badgeVariants = cva(
|
|
'inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset transition-colors',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default:
|
|
'bg-muted text-foreground ring-border',
|
|
primary:
|
|
'bg-primary/10 text-primary ring-primary/20',
|
|
accent:
|
|
'bg-accent/10 text-accent ring-accent/20',
|
|
warning:
|
|
'bg-warning/10 text-warning ring-warning/20',
|
|
destructive:
|
|
'bg-destructive/10 text-destructive ring-destructive/20',
|
|
outline:
|
|
'bg-transparent text-foreground ring-border',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
},
|
|
},
|
|
);
|
|
|
|
export interface BadgeProps
|
|
extends React.HTMLAttributes<HTMLSpanElement>,
|
|
VariantProps<typeof badgeVariants> {}
|
|
|
|
/**
|
|
* Badge — nhãn nhỏ dùng để đánh nhãn nội dung.
|
|
* Variants: default | primary | accent | warning | destructive | outline
|
|
*/
|
|
export function Badge({ className, variant, ...props }: BadgeProps) {
|
|
return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
|
|
}
|