import React from "react";
import classNames from "classnames";
import { StyledBadge } from "./Styles";
/**
 * @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 const Badge = _ref => {
  let {
    dimension = 8,
    className,
    position = "bottom-left",
    backgroundColor,
    value,
    isStandalone = false
  } = _ref;
  return /*#__PURE__*/React.createElement(StyledBadge, {
    className: classNames("c-badge", className),
    dimension: dimension,
    position: position,
    isStandalone: isStandalone,
    backgroundColor: backgroundColor,
    role: "status",
    value: value
  }, value && value > 100 ? 99 + "+" : value);
};
//# sourceMappingURL=Badge.js.map