@kadconsulting/dry
Version:
KAD Reusable Component Library
33 lines (32 loc) • 1.36 kB
TypeScript
import type { ReactNode } from 'react';
import { SemanticColorsEnum, SecondaryColorsEnum } from '../../types';
export { SemanticColorsEnum, SecondaryColorsEnum };
export declare enum BadgeVariants {
/** `${color}-700` background-color */
DARK = "dark",
/**
* Usage discouraged unless used within a "light" BadgeGroup;
* `$background` background-color (i.e., '#ffffff' in light theme);
* Untitled UI only uses this variant when used with a BadgeGroup.
*/
LIGHT = "light",
/** `${color}-50` background-color; `${color}-700` color; default */
MEDIUM = "medium",
/** ${color}-50 background-color; ${color}-700 color and border-color */
OUTLINE = "outline"
}
export declare enum BadgeSizes {
SM = "sm",
MD = "md",
LG = "lg"
}
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
/** Default: 'medium'; usage of 'light' discouraged, except within a BadgeGroup where its borders would be visible; for variants, see https://www.figma.com/file/Xt05q1xny4SbE2HHOEFe2j/KAD-MASTER-Untitled-UI?type=design&node-id=1046-3819&t=CHMK7hyNfGt74yTF-0 */
variant?: BadgeVariants;
/** Default: 'sm' */
size?: BadgeSizes;
/** Badge content */
children: ReactNode | ReactNode[];
/** Badge color; default 'primary' */
color?: SemanticColorsEnum | SecondaryColorsEnum;
}