Mga tag at chip

Maliliit na bilog na pill na naglalagay ng label sa mga bagay. Magkamukha sila nang sinasadya, ngunit magkaiba ang trabaho nila: ang badge ay nagsasabi ng katotohanan, ang tag ay nagli-link sa iba pa.

Badge

Static na metadata na hindi isang link: isang teknolohiya sa isang work-experience card, isang wika sa isang post. Neutral na fill, 8-pixel na radius, walang hover.

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

Post tag

Isang link ng taksonomya, mas masikip nang isang pixel sa mga sulok kaysa sa isang badge. Ginagawa nitong berde ang border at teksto nito kapag hini-hover dahil dinadala ka nito sa ibang lugar; hindi ito ginagawa ng isang badge.

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

Kailan gagamitin

Gawin

React Native
Gumamit ng badge para sa isang katotohanan na hindi napipindot.

Huwag

React Native
I-istilo ang isang badge para mukhang napipindot kung walang nangyayari sa pagpindot.

Gawin

Testing
Gumamit ng post tag kapag ang pill ay nagna-navigate sa isang na-filter na listahan.

Huwag

Testing
Punuin ang isang pill ng berde ng brand; sinasadya ang neutral na fill.

Gawin

Testing Leadership Hiring
Igrupo ang magkakaugnay na pill na may maliit at pantay na puwang.

Huwag

TestingLeadershipHiringReact NativeDetoxMSWZodRTKi18n
Punuin ang isang hanay ng napakaraming pill kaya walang mababasa.

Kung saan ito matatagpuan

Badge: .badge (nakagrupo sa .badge-group). Post tag: .post-tag (nakagrupo sa .post-tags). Parehong ginagamit ang neutral na pares na --badge-bg / --badge-text.

Dalawang pinsan ang kumukumpleto sa pamilya ng mga pill: ang tag-cloud pill sa browse page, 44-pixel na tap target na may mono label at tinted na count bubble; at ang series chip, art disc sa tabi ng label, ginagamit ng search palette at ng browse row ng blog.