@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
46 lines (45 loc) • 1.41 kB
TypeScript
import { VariantProps } from 'class-variance-authority';
import { ComponentProps } from 'react';
import { AsChildProp } from '../../utils/misc';
export declare const badgeVariance: (props?: ({
variant?: "default" | "secondary" | "success" | "successLight" | "warning" | "warningLight" | "destructive" | "destructiveLight" | "outline" | null | undefined;
size?: "sm" | "lg" | null | undefined;
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
export interface BadgeProps extends ComponentProps<"div">, VariantProps<typeof badgeVariance> {
asChild?: AsChildProp;
}
/**
* A status descriptor for UI elements.
* Badges are used to highlight an item's status for quick recognition.
*
* @example
* ```tsx
* // Default badge
* <Badge>New</Badge>
* ```
*
* @example
* ```tsx
* // Different variants
* <Badge variant="secondary">Secondary</Badge>
* <Badge variant="destructive">Error</Badge>
* <Badge variant="destructiveLight">Warning</Badge>
* <Badge variant="outline">Outline</Badge>
* ```
*
* @example
* ```tsx
* // Different sizes
* <Badge size="sm">Small</Badge>
* <Badge size="lg">Large</Badge>
* ```
*
* @example
* ```tsx
* // As child element
* <Badge asChild>
* <button>Click me</button>
* </Badge>
* ```
*/
export declare const Badge: ({ className, variant, size, asChild, ...props }: BadgeProps) => import("react").JSX.Element;