@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";
export interface BadgeProps {
    position?: Position;
    dimension?: number;
    className?: string;
    backgroundColor?: string;
    value?: number;
    isStandalone?: boolean;
}
/**
 * @component Badge
 * @description
 * In some products, you might need to show a badge on the right corner of the avatar.
 * We call this a badge. Here's an example that shows if the user is online.
 *
 * @prop {position} - dictates the position of a badge.
 * @prop {dimension} - controls the size of a badge (width and height) in pixels.
 * @prop {backgroundColor} - background-color of a badge.
 *
 * @example
 * <IconButton variant="text gray" size="big">
 *   <BellOffIcon />
 *   <Badge position="top-right" backgroundColor="red" dimension={16} />
 * </IconButton>
 *
 * @see
 * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
 */
export declare const Badge: ({ dimension, className, position, backgroundColor, value, isStandalone, }: BadgeProps) => React.JSX.Element;
export {};
//# sourceMappingURL=Badge.d.ts.map