Badge
Compact labels with subtle lift by default. Disable lift in dense layouts to keep the elevation budget clean.
Variants
Keep the palette tight: use secondary / outline for most UI, and reserve stronger colors for truly semantic states.
SecondaryOutlineDefaultDestructive
With Icons
CompletedPendingActiveReview
Nested (Flat / Level 1)
Badges lift by default. Inside content-heavy cards, set lift={false} and use softer backgrounds like bg-secondary/60.
DesignProductEngineering3 updates
Filter Tags
Applied filters
ReactTypeScriptDesign SystemsTailwind CSS
Chip Row (Standalone Container)
Badges grouped in a container with shared paper shadow.
Paper edgesChromatic lightSoft cutoutFast hover
Version Labels
Paper Cut 10v2.0.0Stable
Paper Cut 10v2.1.0-betaBeta
Paper Cut 10v1.9.5Deprecated