@wix/design-system
Version:
@wix/design-system
43 lines • 1.74 kB
TypeScript
import { EventHandler, MouseEvent, ReactNode } from 'react';
import { IconElement } from '../common';
export interface BadgeProps {
/** Accepts any component as a child item. Usually it is a text string. */
children?: ReactNode;
/** Controls the appearance of a notification */
type?: BadgeType;
/** Controls the appearance of a notification */
skin?: BadgeSkin;
/** Controls the size of the component */
size?: BadgeSize;
/** Pass an icon or a component to display in front of the content */
prefixIcon?: IconElement | null;
/** Pass an icon or a component to display at the end of the content */
suffixIcon?: IconElement | null;
/** Defines a click handler */
onClick?: EventHandler<MouseEvent<HTMLElement>>;
/** Forces uppercase letters */
uppercase?: boolean;
/** Removes paddings from the component */
noPadding?: boolean;
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook?: string;
/**
* Specifies a CSS class name to be appended to the component’s root element.
* @internal
*/
className?: string;
/**
* Controls whether ellipsis tooltip is enabled.
* @default true
*/
showTooltip?: boolean;
/**
* Defines the display property of the component
* @default inline
*/
display?: 'block' | 'inline';
}
export type BadgeSkin = 'general' | 'standard' | 'danger' | 'success' | 'neutral' | 'neutralLight' | 'warning' | 'warningLight' | 'urgent' | 'neutralStandard' | 'neutralSuccess' | 'neutralDanger' | 'premium';
export type BadgeType = 'solid' | 'outlined' | 'transparent';
export type BadgeSize = 'medium' | 'small' | 'tiny';
//# sourceMappingURL=Badge.types.d.ts.map