tesseract/packages/web/categories/information/react/src/components/Badge/index.tsx

import * as React from 'react';
import * as BadgeBase from '@tesseract-design/web-base-badge';

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

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

    return (
      <strong
        ref={ref}
        className={BadgeBase.Root(badgeStyleProps)}
        data-testid="badge"
      >
        <span
          className={BadgeBase.Content()}
        >
          {children}
        </span>
      </strong>
    )
  }
)

Badge.displayName = 'Badge';