@eccenca/gui-elements/dist/types/components/Badge/Badge.d.ts

GUI elements based on other libraries, usable in React application, written in Typescript.

import React from "react";
import { IntentTypes } from "../../common/Intent";
import { IconProps } from "../Icon/Icon";
import { TestIconProps } from "../Icon/TestIcon";
import { TagProps } from "../Tag/Tag";
export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
    /**
     * The badge only accepts numbers, text and ions as valid content.
     */
    children: string | number | React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
    /**
     * Position relative to the parent element where the badge is displayed.
     * `top-right` and `bottom-right` relate to the closest parent element that uses a `relative` or similar positioning.
     */
    position?: "inline" | "top-right" | "bottom-right";
    /**
     * Size of the badge.
     */
    size?: "small" | "medium" | "large";
    /**
     * Maximum characters used by the badge.
     * Text will be ellipsed, a number is displayed for example a 99+.
     * `maxLength` need to be at least 2, otherwise it's ignored.
     * For text it is only a raw measurement, not always an exact character count.
     */
    maxLength?: number;
    /**
     * Meaning of the badge.
     */
    intent?: IntentTypes;
    /**
     * Internally the `<Tag/>` element is used for the badge.
     * Forward other options to the tag.
     * This may overwrite properties set by the badge, use it with care.
     */
    tagProps?: TagProps;
}
/**
 * Display a badge element to add more context to another element.
 * It can display icons, text and numbers.
 */
export declare function Badge({ children, className, position, size, maxLength, intent, tagProps, ...spanProps }: BadgeProps): React.JSX.Element;
export default Badge;