Wrap
Flex container that wraps children to the next line when they overflow. Ideal for tags, badges, and chips.
Tag Cloud
Language tags wrapping naturally across lines with 8px gap.
JavaScriptTypeScriptRustPythonGoFLINRubyJavaSwiftKotlin
Larger Gap
Status badges with 16px gap for more breathing room between items.
ActivePendingExpiredDraftFeatured
Text Editor Toolbar
Icon buttons that wrap to fit the container width. Resize to see wrapping.
Filter Chips
Selectable filter options that wrap within a card.
Categories
AllDesignDevelopmentMarketingAnalyticsSupport
Avatar Group
Wrapping avatars for team member displays.
A
B
C
D
E
F
G
H
Action Buttons
Button group that wraps responsively for narrow containers.
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
gap | text | "16" | Space between items in pixels |
children | content | - | Items to wrap - badges, buttons, tags, or any elements |