Lightweight tag/chip component for displaying labels, categories, or keywords
size="xsmall"size="small"(no size prop)size="large"variant="default"variant="outline"variant="colored" style={{ backgroundColor: "..." }}Light gray background with primary text
{ variant: "default" }Transparent with border
{ variant: "outline" }Compact 20px height for tight spaces
{ size: "xsmall" }Comfortable 40px height (matches Button large)
{ size: "large" }With hover effects and click handler
{ interactive: true, onClick: "() => {}" }Custom background via style prop
{ variant: "colored", style: "{ backgroundColor }" }Side by side size comparison
{ size: "xsmall | small | default | large" }Real-world usage in blog articles
{ asChild: true, size: "large" }Automatic dark mode adaptation
{ variant: "default" }