Recipe: Chip + tag component

A compact label for filtering, categorizing, or displaying metadata.

Preview

ActiveInactiveLiveOffline

Code

<span className="inline-flex items-center gap-1.5
  rounded-full border border-[#8B5CF6]/40
  bg-[#8B5CF6]/10 px-3.5 py-1.5
  text-sm font-medium text-[#8B5CF6]">
  Active
</span>

Variants

DefaultTag

PrimaryTag

AccentTag

With dotTag