CSS Showcase · Live Demo

Badges that speak.

Status, count, and filter patterns — semantic pills, superscript count badges, toggleable filter chips, and wrapping tag clouds.

Featured demo

mobile · inline-tags
ReactTanStackCSSDesign SystemsAccessibilityGridFlexboxAnimation

mobile design patterns

badge-inline-tags.css
/* Wrapping tag cloud */
.badge-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.badge-tags .tag {
  border-radius: 0.35rem;
  background: color-mix(in oklch, var(--foreground) 6%, transparent);
  padding: 0.15rem 0.45rem;
}

CSS features used

  • • color-mix() tonal backgrounds
  • • position: absolute superscript
  • • flex-wrap tag clouds
  • • data-attribute state styling
  • • border-radius pills
  • • Semantic tokens