Etiquetas y chips

Píldoras pequeñas y redondeadas que etiquetan cosas. Se parecen a propósito, pero hacen trabajos distintos: una insignia expone un hecho, una etiqueta enlaza a más.

Insignia

Metadatos estáticos que no son un enlace: una tecnología en una tarjeta de experiencia laboral, un idioma en un post. Relleno neutro, radio de 8 píxeles, sin hover.

React Native TypeScript Astro

<span class="badge">React Native</span>

Etiqueta de post

Un enlace de taxonomía, un píxel más cerrado en las esquinas que una insignia. Vuelve verdes su borde y su texto al hacer hover porque te lleva a algún sitio; una insignia no.

<a class="post-tag" href="/blog/tags/testing/">Testing</a>

Cuándo usarlo

Hazlo

React Native

Usar una insignia para un hecho en el que no se puede hacer clic.

No lo hagas

React Native

Dar a una insignia un aspecto pulsable cuando al pulsar no ocurre nada.

Hazlo

Testing

Usar una etiqueta de post cuando la píldora navega a una lista filtrada.

No lo hagas

Testing

Rellenar una píldora con el verde de marca; el relleno neutro es deliberado.

Hazlo

Testing Leadership Hiring

Agrupar las píldoras relacionadas con un espacio pequeño y uniforme.

No lo hagas

Testing Leadership Hiring React Native Detox MSW Zod RTK i18n

Saturar una fila con tantas píldoras que ninguna se pueda leer.

Dónde vive

Insignia: .badge (agrupadas en .badge-group). Etiqueta de post: .post-tag (agrupadas en .post-tags). Ambas comparten el par neutro --badge-bg / --badge-text.

Dos primas completan la familia de píldoras: la píldora de la nube de etiquetas en la página de exploración, un objetivo táctil de 44 píxeles con etiqueta mono y burbuja de recuento tintada; y el chip de serie, un disco de arte junto a una etiqueta, usado por la paleta de búsqueda y la fila de exploración del blog.