@patreon/studio
Version:
Patreon Studio Design System
44 lines (43 loc) • 1.19 kB
TypeScript
export interface BadgeProps {
/**
* Defaults to `primary`. Background color of badge.
*/
variant?: 'primary' | 'secondary';
/**
* Badge count – needs to be passed as a number or string.
*/
children?: React.ReactNode;
/**
* HTML id property.
*/
id?: string;
/**
* Defaults to 2. Maximum number of digits to display (truncates with `+`).
*/
maxDigits?: number;
/**
* Defaults to null. The React element to which the badge should be affixed (optional).
*/
target?: React.ReactElement<Record<string, never>> | null;
/**
* X offset of badge from target in pixels. Defaults to half of the badge’s width.
*/
xOffset?: number;
/**
* Y offset of badge from target in pixels. Defaults to half of the badge’s height.
*/
yOffset?: number;
/**
* Display a dot instead of numbers.
*/
dot?: boolean;
/**
* Defaults to false. If passed zero, hide the badge entirely.
*/
hideIfZero?: boolean;
}
export interface StyledProps extends Pick<BadgeProps, 'dot' | 'variant'> {
right?: string;
top?: string;
badgeOnTarget?: boolean;
}