- 1.5.0

Cluster

Groups child elements with a consistent gap between them.

Read more Read less

Common use cases are groups of buttons, groups of tags, or similar items.

The grouping is visual, so no role is set. If the children form a set that should also be grouped for assistive technology, pass role="group" and a label.

Maturity: Stable

Usage

<.cluster>
  <div>some item</div>
  <div>some other item</div>
</.cluster>

With a role and a label:

<.cluster role="group" aria-label="Actions">
  <.button>Edit</.button>
  <.button>Delete</.button>
</.cluster>
Default
Open in playground
Labrador Retriever German Shepherd Golden Retriever Bulldog Beagle Poodle Rottweiler Yorkshire Terrier Boxer Dachshund Border Collie Great Dane 
<div style="inline-size: 100%">
  <.cluster>
    <.tag>Labrador Retriever</.tag>
    <.tag>German Shepherd</.tag>
    <.tag>Golden Retriever</.tag>
    <.tag>Bulldog</.tag>
    <.tag>Beagle</.tag>
    <.tag>Poodle</.tag>
    <.tag>Rottweiler</.tag>
    <.tag>Yorkshire Terrier</.tag>
    <.tag>Boxer</.tag>
    <.tag>Dachshund</.tag>
    <.tag>Border Collie</.tag>
    <.tag>Great Dane</.tag>
  </.cluster>
</div>
With buttons
Open in playground 
<div style="inline-size: 100%">
  <.cluster>
    <.button type="button">Adopt</.button>
    <.button type="button">Save for later</.button>
    <.button type="button">Share</.button>
  </.cluster>
</div>
With mixed heights
Open in playground
Labrador Retriever German Shepherd Golden Retriever 
<div style="inline-size: 100%">
  <.cluster>
    <.button type="button">Adopt</.button>
    <.button type="button">Save for later</.button>
    <.button type="button">Share</.button><.tag>Labrador Retriever</.tag>
    <.tag>German Shepherd</.tag>
    <.tag>Golden Retriever</.tag>
  </.cluster>
</div>