glide-design-system/src/lib/components/badge/Badge.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React from "react";
import PropTypes from "prop-types";
import styles from "./badge.module.css";

const Badge = ({
  children,
  style,
  className,
  badgeClass,
  badgeStyle,
  label,
  onClick,
}) => {
  return (
    <div
      style={style}
      onClick={(e) => onClick && onClick(e)}
      className={`${styles.badgeContainer} ${className ? className : ""}`}
    >
      <div className={`${styles.badgeIcon}`}>
        {children}
        <span
          style={badgeStyle}
          className={`${label ? styles.badge : styles.noLabel} ${
            badgeClass ? badgeClass : ""
          }`}
        >
          {label}
        </span>
      </div>
    </div>
  );
};

export default Badge;