Status

Badge de estado versátil que puede mostrar una píldora con fondo de color, ícono y etiqueta opcionales, o un punto circular de color cuando no hay etiqueta ni ícono (o cuando se usa shape="circle"). El color del texto se deriva automáticamente del brillo del color de fondo.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | color | string | No | 'transparent' | Color de fondo. Admite claves del tema o strings CSS. | | label | string | No | — | Etiqueta de texto del badge. | | labelColor | string | No | auto | Color explícito de la etiqueta. | | labelSize | number | No | según tamaño | Tamaño de fuente de la etiqueta en píxeles. | | labelStyle | React.CSSProperties | No | — | Estilos del texto de la etiqueta. | | icon | string | No | — | Nombre del ícono junto a la etiqueta. | | iconPaths | any[] | No | — | Paths SVG personalizados para el ícono. | | iconColor | string | No | auto | Color explícito del ícono. | | iconSize | number | No | según tamaño | Tamaño del ícono en píxeles. | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number \| \${number}px`| No |'md'| Tamaño del badge. Los tokens mapean a presets; los números y strings de píxeles fijan el diámetro del círculo. | |shape|'circle'| No | — | Fuerza el renderizado de punto circular. | |width|number | string| No | — | Ancho explícito (modo punto). | |height|number | string| No | — | Alto explícito (modo punto). | |borderRadius|number | string| No |4| Radio de borde de la forma de píldora. | |containerStyle|React.CSSProperties| No | — | Estilos del contenedor. | |containerClassName|string| No |'status-container'` | Clase CSS del contenedor. |

Uso

Píldora con etiqueta

import Status from '@/components/Status';

export default function Example() {
  return <Status color="success" label="Activo" icon="check" />;
}

Punto de color

import Status from '@/components/Status';

export default function Example() {
  // Sin etiqueta ni ícono → punto circular
  return <Status color="#e74c3c" size="sm" />;
}

Color dinámico desde datos

import Status from '@/components/Status';

const item = { statusLabel: 'Pendiente', statusColor: '#f39c12' };

export default function Example() {
  return (
    <Status
      color={item.statusColor}
      label={item.statusLabel}
      size="md"
    />
  );
}