kitchen-sink-server/src/modules/info/components/Badge/index.tsx

import * as React from 'react';
import {
  css,
} from 'goober';

const BadgeBase = ({ rounded }: { rounded: boolean }) => css`
  position: relative;
  height: 1.5em;
  min-width: 1.5em;
  display: inline-grid;
  vertical-align: middle;
  place-content: center;
  border-radius: ${rounded ? '0.75em' : '0.25rem'};
  overflow: hidden;
  font-stretch: var(--font-stretch-base, normal);
  padding: 0 0.25rem;
  box-sizing: border-box;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    opacity: 0.25;
    content: '';
  }
`;

const Content = () => css`
  position: relative;
  font-size: 0.75em;
`;

export type BadgeProps = React.HTMLProps<HTMLSpanElement> & {
  rounded?: boolean,
};

export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
  (
    {
      children,
      rounded = false,
    },
    ref,
  ) => {
    const badgeStyleProps = React.useMemo(() => ({
      rounded,
    }), [rounded]);

    return (
      <strong
        ref={ref}
        className={BadgeBase(badgeStyleProps)}
      >
        <span
          className={Content()}
        >
          {children}
        </span>
      </strong>
    )
  }
)

Badge.displayName = 'Badge';