@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
37 lines (36 loc) • 1.17 kB
TypeScript
import { VariantProps } from 'class-variance-authority';
import { ReactNode } from 'react';
import { badgeVariants } from './Badge.variants';
/**
* Props for the Badge component.
*
* @example
* ```tsx
* <Badge label="New" variant="success" />
* <Badge label="Pending" variant="warning" />
* <Badge label="Error" variant="error" dismissible onDismiss={() => {}} />
* <Badge label="With Icon" leftIcon={<Icon />} />
* ```
*/
export type Props = VariantProps<typeof badgeVariants> & {
/** Additional CSS classes */
className?: string;
/** Show dismiss button */
dismissible?: true;
/** Allow text selection (default: true) */
isSelectable?: boolean;
/** Badge text content */
label: string;
/** Icon displayed on the left */
leftIcon?: ReactNode;
/** Show loading spinner */
loading?: boolean;
/** Icon displayed on the right (when not dismissible) */
rightIcon?: ReactNode;
/** Click handler (makes badge interactive) */
onClick?: VoidFunction;
/** Callback when dismiss button clicked */
onDismiss?: VoidFunction;
};
/** @deprecated Use Props instead */
export type BadgeProps = Props;