Badge

Badge.tsx

import React from 'react';
import styles from './Badge.module.css';


type BadgeProps = {
  text: string;
  backgroundColor?: string;
  color?: string;
};

const Badge = ({ text, backgroundColor = 'gray', color = 'white' }: BadgeProps) => {
  return (
    <span className={styles.badge} style={{ backgroundColor, color }}>
      {text}
    </span>
  );
};

export default Badge;

Badge.module.css

.badge {
  display: inline-block;
  padding: 0.2em 0.5em;
  border-radius: 0.5em;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}