wiki-Pill
Pill
El componente Pill es un componente visual que permite mostrar etiquetas con colores diferenciados. Es útil para representar estados, categorías o etiquetas visuales con colores específicos.
Referencia de la API
Props
| Propiedad | Tipo | Requerido | Descripción |
|---|---|---|---|
color | 'green' | 'yellow' | 'red' | No | Define el color de la etiqueta. Si no se proporciona, se aplica un estilo por defecto. |
style | CSSProperties | No | Estilos CSS personalizados para el contenedor del componente. |
className | string | No | Clases CSS adicionales para el componente. |
onClick | (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void | No | Callback ejecutado al hacer clic en la etiqueta. |
aura-test | string | No | Identificador para pruebas automatizadas. |
Children
El contenido del componente Pill se pasa como children y puede ser texto, números o incluso otros componentes.
Ejemplo de uso
import { Pill } from '@auravant/ui-kit';
<Pill color="green" onClick={() => alert('Pill clickeado!')}>
Etiqueta verde
</Pill>;
Consideraciones
- Si se proporciona una función
onClick, el cursor cambiará automáticamente a un estilo de puntero (pointer).