@activecollab/components
Version:
ActiveCollab Components
42 lines • 1.3 kB
JavaScript
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