Etiquetes i xips

Píndoles petites i arrodonides que etiqueten coses. S'assemblen expressament, però fan feines diferents: un distintiu indica un fet, una etiqueta enllaça amb més informació.

Distintiu

Metadades estàtiques que no són un enllaç: una tecnologia en una targeta d'experiència laboral, una llengua en una entrada. Fons neutre, radi de 8 píxels, sense efecte en passar-hi el cursor.

React Native TypeScript Astro

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

Etiqueta d'entrada

Un enllaç de taxonomia, amb les cantonades un píxel més tancades que un distintiu. En passar-hi el cursor, tenyeix de verd la vora i el text perquè et porta a algun lloc; un distintiu no ho fa.

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

Quan utilitzar-ho

Fes

React Native

Fes servir un distintiu per a un fet que no es pot clicar.

No facis

React Native

Dissenyar un distintiu perquè sembli que es pot tocar quan en tocar-lo no passa res.

Fes

Testing

Fes servir una etiqueta d'entrada quan la píndola porti a una llista filtrada.

No facis

Testing

Omplir una píndola amb el verd de la marca; el fons neutre és deliberat.

Fes

Testing Leadership Hiring

Agrupa les píndoles relacionades amb una separació petita i uniforme.

No facis

Testing Leadership Hiring React Native Detox MSW Zod RTK i18n

Amuntegar tantes píndoles en una fila que no se'n pugui llegir cap.

On es troba

Distintiu: .badge (agrupat a .badge-group). Etiqueta d'entrada: .post-tag (agrupat a .post-tags). Tots dos comparteixen la parella neutra --badge-bg / --badge-text.

Dues cosines completen la família de píndoles: la píndola del núvol d’etiquetes a la pàgina d’exploració, un objectiu tàctil de 44 píxels amb etiqueta mono i bombolla de recompte tintada; i el xip de sèrie, un disc d’art al costat d’una etiqueta, usat per la paleta de cerca i la fila d’exploració del blog.