Pill

Badge redondeado pequeño que muestra una etiqueta de texto con un ícono opcional en cada extremo. Útil para etiquetas, categorías, estados o cualquier metadato corto. Cinco presets de tamaño controlan el padding y el tamaño de fuente. Cuando se provee onClick, el pill se vuelve interactivo.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | text | string | Sí | — | Texto de la etiqueta. | | color | string | No | primary del tema | Color de fondo. Admite claves del tema o strings CSS. | | textColor | string | No | text del tema | Color del texto e íconos. | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | 'md' | Controla padding y tamaño de fuente. | | startIcon | string | No | — | Nombre del ícono antes del texto. | | startIconSize | number | No | — | Tamaño del ícono inicial en píxeles. | | startIconStyle | React.CSSProperties | No | — | Estilos del ícono inicial. | | endIcon | string | No | — | Nombre del ícono después del texto. | | endIconSize | number | No | — | Tamaño del ícono final en píxeles. | | endIconStyle | React.CSSProperties | No | — | Estilos del ícono final. | | onClick | () => void | No | — | Handler de clic. Hace el pill interactivo. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor del pill. | | textStyle | React.CSSProperties | No | — | Estilos del texto de la etiqueta. |

Uso

Básico

import Pill from '@/components/Pill';

export default function Example() {
  return <Pill text="En Stock" color="success" textColor="#fff" />;
}

Con íconos y handler de clic

import Pill from '@/components/Pill';

export default function Example() {
  return (
    <Pill
      text="Electrónica"
      startIcon="tag"
      endIcon="close"
      size="sm"
      color="#e8f0fe"
      textColor="#1a73e8"
      onClick={() => console.log('Pill clickeado')}
    />
  );
}