@engie-group/fluid-design-system
Version:
The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.
43 lines (42 loc) • 1.35 kB
TypeScript
import { Emphasis, Scale, Variant } from '../../variations';
export declare const BADGE_VARIANTS: readonly ["neutral", "danger", "warning", "success", "information", "discovery", "planet", "ai"];
export type BadgeVariant = Extract<Variant, (typeof BADGE_VARIANTS)[number]>;
export declare const BADGE_EMPHASIS: readonly ["bold", "subtle", "minimal"];
export type BadgeEmphasis = Extract<Emphasis, (typeof BADGE_EMPHASIS)[number]>;
export declare const BADGE_SCALES: readonly ["sm", "md", "lg"];
export type BadgeScale = Extract<Scale, (typeof BADGE_SCALES)[number]>;
export type BadgeProperties = {
/**
* Badge color variant
**/
variant?: BadgeVariant;
/**
* Badge emphasis
**/
emphasis?: BadgeEmphasis;
/**
* Badge scale
**/
scale?: BadgeScale;
/**
* Material icon name
*/
iconName?: string;
/**
* Whether badge content is forced to uppercase or not
**/
isUppercase?: boolean;
/**
* When value is a number, you can pass a capedValue, so the displayed value will be ${capedValue}+
* If the value is < 0, will display 0
**/
capedValue?: number;
/**
* Screen reader only unit label.
*
* @example
* // read as "12 notifications"
* <NJBadge unitLabel="notifications">12</NJBadge>
*/
unitLabel?: string;
};