Pills en UI: Qué Son, Cómo Implementarlas y los Errores que Debes Evitar

En el universo del diseño de interfaces, a menudo son los componentes más pequeños los que tienen el mayor impacto en la experiencia de usuario. Uno de estos elementos, tan omnipresente como potente, es la “pill” (o píldora). Este discreto rectángulo redondeado es una herramienta fundamental para crear filtros, mostrar selecciones y organizar información de manera clara e interactiva. Pero, ¿qué hace que una “pill” sea realmente efectiva?

Este artículo es una guía completa para dominar este componente. Exploraremos qué es exactamente, cómo se diferencia de elementos similares como los “tags” y “badges”, y te daremos las mejores prácticas de diseño, implementación con código y, lo más importante, accesibilidad para que puedas usarlas como un profesional.

¿Qué es Exactamente una “Pill” en Diseño Web?

Una “pill” es un componente de interfaz visualmente distintivo, con forma de rectángulo con los bordes completamente redondeados. Su propósito es contener una pequeña cantidad de información, como una etiqueta, un filtro o el nombre de una categoría. Aunque el término “pill” se refiere a su apariencia, su verdadero valor reside en su función.

La Diferencia es la Función: Pills vs. Tags, Chips y Badges

Es fácil confundir estos términos, pero la distinción es clave para un buen diseño:

• Badges (Insignias): Son estáticos y su única función es informar. Piensa en el contador de notificaciones en un icono (“3”) o una etiqueta de “Nuevo”. No son interactivos.
• Tags, Chips y Pills: Estos términos a menudo se usan de manera intercambiable para describir etiquetas que pueden ser interactivas. Su función principal es la categorización, el filtrado o la selección. Una “pill” o un “chip” es, en esencia, un estilo visual de un “tag” interactivo.

La regla de oro: Si el usuario no puede hacer clic o interactuar con él, probablemente sea un “badge”. Si permite filtrar, seleccionar o eliminar, es un “tag” (con estilo de “pill” o “chip”).

Mejores Prácticas para un Diseño de Pills Efectivo (UI/UX)

Un buen diseño de “pills” va más allá de un border-radius. Se trata de claridad, coherencia y usabilidad.

• Claridad y Concisión: El texto dentro de una píldora debe ser breve y directo. Idealmente, una o dos palabras. Si necesitas una frase, probablemente este no sea el componente adecuado.
• Consistencia Visual: Mantén un estilo coherente para todas las píldoras que cumplan la misma función. Si las píldoras de filtro son azules, todas deben serlo. La inconsistencia confunde al usuario.
• Espaciado Generoso (Padding): El espacio interno es crucial para la legibilidad y para que sean fáciles de pulsar en dispositivos táctiles. Una buena referencia, inspirada en frameworks como Bootstrap, es un padding vertical de la mitad del padding horizontal (ej: padding: 0.5em 1em;).
• Contraste y Color: Asegura un contraste de color suficiente entre el texto y el fondo para cumplir con las directrices de accesibilidad (WCAG), que recomiendan un ratio mínimo de 4.5:1. Una técnica útil es usar colores de fondo con una opacidad reducida para lograr una apariencia más suave y visualmente integrada.
• Estados Interactivos Claros: Una “pill” interactiva debe comunicar su estado en todo momento. Define estilos visuales claros para:
  • :hover (cuando el cursor está encima)
  • :focus (cuando se navega con el teclado)
  • :active (mientras se está pulsando)
  • disabled (cuando la opción no está disponible)

Cómo Implementar Pills: Del HTML al CSS

Crear una “pill” es sencillo, pero hacerla bien requiere una estructura semántica correcta.

La Estructura Semántica (HTML)

La etiqueta HTML que uses dependerá de la función de la “pill”:

• <span>: Para “pills” puramente decorativas o etiquetas estáticas.
• <a>: Si la “pill” funciona como un enlace de navegación (ej: un clic te lleva a una página de categoría).
• <button>: La opción correcta y más accesible si la “pill” realiza una acción en la página actual, como aplicar o eliminar un filtro.

Para una “pill” que se puede eliminar (muy común en filtros), el patrón correcto es un contenedor con un botón de cierre anidado.

HTML

<div class="pill-container">
  <span>Filtro Aplicado</span>
  <button class="pill-remove-button" aria-label="Eliminar filtro: Filtro Aplicado">
    &times; </button>
</div>

Estilos Fundamentales (CSS desde Cero)

No necesitas un framework para crear una “pill” elegante. Aquí tienes el CSS esencial:

CSS

.pill-container {
  display: inline-flex; /* Alinea el texto y el botón */
  align-items: center;
  gap: 0.5em; /* Espacio entre el texto y el botón */
  
  background-color: #e0e0e0;
  color: #333;
  font-size: 0.875rem;
  
  padding: 0.5em 1em;
  border-radius: 9999px; /* El truco para una forma de píldora perfecta */
}

.pill-remove-button {
  /* Resetea los estilos de botón por defecto */
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  
  /* Estilo del botón */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  background-color: rgba(0,0,0,0.1);
  color: #333;
  border-radius: 50%;
  font-weight: bold;
}

.pill-remove-button:hover,
.pill-remove-button:focus {
  background-color: rgba(0,0,0,0.2);
  outline: 2px solid blue; /* Para un foco visible */
}

La Clave Ignorada: Haciendo tus Pills Accesibles (a11y)

Un diseño bonito no sirve de nada si no todos pueden usarlo. La accesibilidad no es una opción, es un requisito.

1. La Función Manda sobre la Forma: Si tu “pill” es para eliminar un filtro, debe ser un <button>. Esto le proporciona semántica nativa y la hace operable para tecnologías de asistencia.
2. Atributos ARIA Indispensables: El contexto es vital para los usuarios de lectores de pantalla. Un botón con una “X” no dice nada. Usa aria-label para describir la acción de forma explícita.
   • Incorrecto: <button>X</button>
   • Correcto: <button aria-label="Eliminar filtro de color: Azul">X</button>
3. Navegación por Teclado: Al usar un <button> nativo, la navegación por teclado (Tab para enfocar, Enter/Espacio para activar) funcionará automáticamente. Solo asegúrate de que el estado :focus tenga un indicador visual claro (un outline).

5 Errores Comunes al Usar Pills (y Cómo Evitarlos)

1. Ruido Visual por Sobreuso: Usarlas para todo diluye su propósito. Resérvalas para agrupar, filtrar o etiquetar información clave. No son un reemplazo para el texto plano.
2. Inconsistencia Visual y Funcional: Mezclar diferentes estilos y funciones (algunas son enlaces, otras son botones, otras son texto) sin una lógica clara crea una experiencia de usuario impredecible y frustrante.
3. Contenido Demasiado Extenso: Las “pills” están diseñadas para la brevedad. Forzar frases largas en ellas rompe el diseño y la legibilidad.
4. Ambigüedad Interactiva: El usuario debe saber al instante si una “pill” es interactiva o estática. Usa pistas visuales como el cursor del ratón (cursor: pointer) y los estados de hover para indicar la interactividad.
5. Ignorar la Accesibilidad: Este es el error más grave. No usar la semántica HTML correcta o no proporcionar etiquetas ARIA excluye a una parte de tus usuarios y demuestra una falta de profesionalismo.

¿Con qué nos quedamos?

El componente “pill” es mucho más que un simple rectángulo redondeado; es una herramienta precisa para mejorar la navegación y la organización de la interfaz. Como hemos visto, su éxito no depende solo de su apariencia, sino de una combinación de diseño claro, implementación semántica y, sobre todo, un compromiso con la accesibilidad.

Al recordar que la función dicta la forma, mantener la coherencia y priorizar a todos los usuarios, puedes transformar estas pequeñas píldoras de información en elementos que hacen tus diseños más intuitivos, eficientes e inclusivos.