glide-design-system/src/lib/components/chip/Chip.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 "./chip.css";

export const Chip = ({ type, children, style, className, id, name }) => {
  let chipClass = "chip";

  // Determine the appropriate class based on the 'type' prop
  if (type === "success") {
    chipClass += " success";
  } else if (type === "warning") {
    chipClass += " warning";
  } else if (type === "info") {
    chipClass += " info";
  } else if (type === "error") {
    chipClass += " error";
  } else if (type === "disable") {
    chipClass += " disable";
  } else {
    chipClass += " success";
  }

  return (
    <div
      data-tesid={id}
      id={id}
      name={name}
      style={{ fontFamily: "Roboto, sans-serif", ...style }}
      className={`${chipClass} ${className ? className : ""}`}
    >
      {children}
    </div>
  );
};