Sergio Pereira
ESEN
LinkedInManfred
Idioma
ESEN
Apariencia
Display

Badge

Indicador de estado con variantes

Preview

Nuevo

size
variant
color
children

Code

import css from "./Badge.module.css";

type Size = "xs" | "sm" | "md";
type Color = "text-tertiary" | "accent";

interface ResponsiveSize {
  base: Size;
  mobile?: Size;
  tablet?: Size;
  desktop?: Size;
  wide?: Size;
}

interface BadgeProps {
  size: Size | ResponsiveSize;
  variant: "outline" | "solid" | "soft";
  color: Color;
  children: React.ReactNode;
}

function getSizeClasses(size: Size | ResponsiveSize): string {
  if (typeof size === "string") {
    return css[size];
  }

  const classes = [css[`${size.base}_base`]];

  if (size.mobile) classes.push(css[`${size.mobile}_mobile`]);
  if (size.tablet) classes.push(css[`${size.tablet}_tablet`]);
  if (size.desktop) classes.push(css[`${size.desktop}_desktop`]);
  if (size.wide) classes.push(css[`${size.wide}_wide`]);

  return classes.join(" ");
}

export default function Badge({ size, variant, color, children }: BadgeProps) {
  return (
    <div
      className={`
        ${css.badge}
        ${getSizeClasses(size)}
        ${css[variant]}
      `}
      style={
        { "--badge-color": `var(--color-${color})` } as React.CSSProperties
      }
    >
      <p>{children}</p>
    </div>
  );
}

Props

PropTypeRequiredDescription
size"xs" | "sm" | "md" | ResponsiveSizerequiredTamaño de la insignia (altura, tipografía y padding). Fijo o responsive.
variant"outline" | "solid" | "soft"requiredEstilo visual: contorno, relleno sólido o relleno tenue.
color"text-tertiary" | "accent"requiredToken del sistema que tiñe la insignia.
childrenReact.ReactNoderequiredContenido de la insignia.