@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
54 lines (53 loc) • 2.05 kB
TypeScript
import type { HTMLProps, ReactNode } from 'react';
import type { SpacingProps } from '../../shared/types';
import type { SkeletonShow } from '../skeleton/Skeleton';
export type BadgeProps = {
/**
* The label description of the badge. Only required when passing a number as the badge content.
*/
label?: ReactNode;
/**
* Custom `className` for the component.
*/
className?: string;
/**
* Applies loading skeleton.
*/
skeleton?: SkeletonShow;
/**
* Content to display the badge on top of.
*/
children?: ReactNode;
/**
* Content of the component.
*/
content?: string | number | ReactNode;
/**
* Vertical positioning of the component. Options: `bottom` | `top`.
*/
vertical?: 'bottom' | 'top';
/**
* Horizontal positioning of the component. Options: `left` | `right`.
*/
horizontal?: 'left' | 'right';
/**
* Defines the visual appearance of the badge. There are two main variants `notification` and `information`. The `content` variant is just for placement purposes, and will require you to style the `content` all by yourself. Default variant is `information`.
*/
variant?: 'information' | 'notification' | 'content';
/**
* Defines the status color of the `"information"` variant. Has no effect on other variants. Defaults to `"default"`.
*/
status?: 'default' | 'neutral' | 'positive' | 'warning' | 'negative';
/**
* Applies subtle style to `"information"` variant. Has no effect on other variants. Defaults to `false`.
*/
subtle?: boolean;
/**
* Removes the badge without removing children. Useful when Badge wraps content. Defaults to `false`.
*/
hideBadge?: boolean;
};
export type BadgeAllProps = BadgeProps & SpacingProps & Omit<HTMLProps<HTMLElement>, 'content' | 'label'>;
export declare const badgeDefaultProps: BadgeAllProps;
declare function Badge(localProps: BadgeAllProps): import("react/jsx-runtime").JSX.Element;
export default Badge;