Skip to content
Tattva

Cluster

Experimental

A row of items that wraps to the next line when it runs out of room.

Also known as hstack, inline, wrap, flex row

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Tags that wrap

DraftSharedReviewed
UsageCodeDesignAccessibility

When to use it

A row of small things that wraps onto the next line instead of running off the edge. Nothing is hidden or squeezed, so tags and buttons stay readable at any width.

Made of: Outer box · Items · Push apart

Use it for

  • A set of tags or filters.
  • A row of buttons, such as Cancel and Send.
  • Small details in one line, such as a file count and a date.
  • A label at one end and an action pushed to the other.

Not for

  • Items that go top to bottom: use Stack.
  • Form fields or cards that should line up in columns: use Grid.

Do and avoid

Lisbon3 nightsWindow seatRefundableBreakfastLate checkout
Do. Tags wrap onto a new line, so every one stays readable.
Lisbon3 nightsWindow seatRefundableBreakfastLate checkout
Avoid. Forcing one line cuts off tags, so people miss some.

Do

  • Use it for groups that can wrap, such as tags and filters.
  • Keep the space smaller than the space between groups.
  • Use a real list for a set of related links or tags.
  • Line up the text bottoms when text sizes differ.

Avoid

  • Do not use it for form columns. Use Grid.
  • Do not force one line and hide what does not fit.
  • Do not count on the order changing when items wrap.
  • Do not put long paragraphs inside as items.

On a phone

  • Items wrap onto the next line when they do not fit, so a row of chips or actions never runs off a phone screen.
  • The gap stays the same, and buttons inside a wrapped row keep their size and have a 44px tap area on a touch screen.

Seen in products

  • NN/g notes that items close together read as a group and that stacking on a phone can break groups.
  • Accessibility guidelines ask that text can grow to 200% without sideways scrolling.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started