@activecollab/components/dist/esm/components/Badge/Badge.d.ts

ActiveCollab Components

import React from "react";
type Position = "top-left" | "top-right" | "bottom-right" | "bottom-left";
type Shape = "circle" | "pill";
export interface BadgeProps {
    position?: Position;
    dimension?: number;
    className?: string;
    backgroundColor?: string;
    textColor?: string;
    value?: number;
    cap?: number;
    shape?: Shape;
    shadows?: boolean;
    isStandalone?: boolean;
}
/**
 * @component Badge
 * @description
 * A small pill that sits on the corner of an avatar or an icon, or stands in a
 * row on its own. It shows a count, or nothing at all when it marks a state.
 *
 * @prop {position} - dictates the position of a badge.
 * @prop {dimension} - controls the height of a badge in pixels. The width grows with the content.
 * @prop {shape} - "pill" adds horizontal padding so the badge reads as long.
 * @prop {cap} - the highest number shown. Above it the badge renders `{cap}+`.
 * @prop {backgroundColor} - background-color of a badge.
 * @prop {textColor} - color of the number.
 * @prop {isStandalone} - takes the badge out of absolute positioning.
 *
 * @example
 * <IconButton variant="text gray" size="big">
 *   <BellOffIcon />
 *   <Badge position="top-right" backgroundColor="var(--red-alert)" dimension={16} value={7} cap={99} />
 * </IconButton>
 *
 * @see
 * https://system.activecollab.com/?path=/story/components-indicators-badge--badge
 */
export declare const Badge: ({ dimension, className, position, backgroundColor, textColor, value, cap, shape, shadows, isStandalone, }: BadgeProps) => React.JSX.Element;
export {};
//# sourceMappingURL=Badge.d.ts.map