@loke/design-system
Version:
A design system with individually importable components
31 lines (30 loc) • 1.66 kB
text/typescript
import { type VariantProps } from "class-variance-authority";
import type * as React from "react";
declare const badgeVariants: (props?: ({
removable?: boolean | null | undefined;
variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
onRemove?: () => void;
}
/**
* Badge component for displaying short pieces of information or status indicators.
*
* Badges are small, colorful components typically used to highlight information, show counts, or indicate status. They provide a compact and visually distinct way to draw attention to specific elements or convey quick bits of information.
*
* Key features:
* - Compact design suitable for inline use
* - Multiple visual variants to convey different types of information
* - Customizable through className prop for further styling
* - Accessible focus states for keyboard navigation
*
* Common use cases:
* - Displaying notification counts
* - Indicating status (e.g., "New", "Updated", "In Progress")
* - Highlighting features or categories
* - Showing small counts or metrics
*
* The Badge component is designed to be flexible and can be used in various contexts such as next to navigation items, in tables, alongside form elements, or within other components to provide additional visual information.
*/
declare function Badge({ className, variant, onRemove, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
export { Badge, badgeVariants };