@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
39 lines (38 loc) • 1.34 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import classnames from "classnames";
const stateClass = {
default: "bfc-theme-fade-bg",
neutral: "bfc-neutral-fade-bg",
brand: "bfc-brand-fade-bg",
chill: "bfc-chill-fade-bg",
attn: "bfc-attn-fade-bg",
success: "bfc-success-fade-bg",
warning: "bfc-warning-fade-bg",
alert: "bfc-alert-fade-bg"
};
const invertedStateClass = {
default: "bfc-theme-bg",
neutral: "bfc-neutral-bg",
brand: "bfc-brand-bg",
chill: "bfc-chill-bg",
attn: "bfc-attn-bg",
success: "bfc-success-bg",
warning: "bfc-warning-bg",
alert: "bfc-alert-bg"
};
/**
* Non-clickable badge for very short messages (i.e. server status) - also see `<Tag>`
*/ const Badge = /*#__PURE__*/ forwardRef(({ children, className, state = "default", inverted = false, pill = false, ...props }, ref)=>{
const colorClassName = inverted ? invertedStateClass[state] ?? invertedStateClass.default : stateClass[state] ?? stateClass.default;
return /*#__PURE__*/ _jsx("div", {
className: classnames("bf-badge", "bf-open-sans", className, colorClassName, {
"bf-badge-pill": pill
}),
ref: ref,
...props,
children: children
});
});
Badge.displayName = "Badge";
export default Badge;