Cluster

Lays out children in a wrapping inline row — like CSS flex-wrap. When items don’t fit on one line they wrap onto the next. A cluster can split across pages between lines.

Attributes

Attribute	Type	Default	Description
align	string	start	Cross-axis alignment: start center end stretch
justify	string	start	Main-axis distribution: start center end. between is an error on a cluster
gap	token/pt	—	Gap between items (horizontal and vertical)
width	token/pt	—	Constrain width
padding	spacing	—	Inner padding
background	color	—	Background color
border	string	—	Border
radius	token/pt	—	Corner radius
font	string	inherit	Font name
font-size	token/pt	inherit	Font size
data-source	string	—	Dot-path to array — repeats this element per item

Tag / badge row

XML

<cluster gap="s">
  <frame padding="xs" background="#e8f0fe" radius="xs">
    <text font-size="xs" color="#1a73e8">Design</text>
  </frame>
  <frame padding="xs" background="#e8f0fe" radius="xs">
    <text font-size="xs" color="#1a73e8">Engineering</text>
  </frame>
  <frame padding="xs" background="#fce8e6" radius="xs">
    <text font-size="xs" color="#c5221f">Urgent</text>
  </frame>
</cluster>

Node.js

L.cluster({ gap: 's' }, [
    L.frame({ padding: 'xs', background: '#e8f0fe', radius: 'xs' }, [
        L.text({ fontSize: 'xs', color: '#1a73e8' }, ['Design']),
    ]),
    L.frame({ padding: 'xs', background: '#e8f0fe', radius: 'xs' }, [
        L.text({ fontSize: 'xs', color: '#1a73e8' }, ['Engineering']),
    ]),
    L.frame({ padding: 'xs', background: '#fce8e6', radius: 'xs' }, [
        L.text({ fontSize: 'xs', color: '#c5221f' }, ['Urgent']),
    ]),
])

Python

L.cluster(ClusterAttr(gap='s'), [
    L.frame(FrameAttr(padding='xs', background='#e8f0fe', radius='xs'), [
        L.text(TextAttr(font_size='xs', color='#1a73e8'), ['Design'])
    ]),
    L.frame(FrameAttr(padding='xs', background='#e8f0fe', radius='xs'), [
        L.text(TextAttr(font_size='xs', color='#1a73e8'), ['Engineering'])
    ]),
    L.frame(FrameAttr(padding='xs', background='#fce8e6', radius='xs'), [
        L.text(TextAttr(font_size='xs', color='#c5221f'), ['Urgent'])
    ])
])

PHP

L::cluster(new ClusterAttr(gap: 's'), [
    L::frame(new FrameAttr(padding: 'xs', background: '#e8f0fe', radius: 'xs'), [
        L::text(new TextAttr(fontSize: 'xs', color: '#1a73e8'), ['Design']),
    ]),
    L::frame(new FrameAttr(padding: 'xs', background: '#e8f0fe', radius: 'xs'), [
        L::text(new TextAttr(fontSize: 'xs', color: '#1a73e8'), ['Engineering']),
    ]),
    L::frame(new FrameAttr(padding: 'xs', background: '#fce8e6', radius: 'xs'), [
        L::text(new TextAttr(fontSize: 'xs', color: '#c5221f'), ['Urgent']),
    ]),
])

.NET

L.Cluster(new() { Gap = "s" }, [
    L.Frame(new() { Padding = "xs", Background = "#e8f0fe", Radius = "xs" }, [
        L.Text(new() { FontSize = "xs", Color = "#1a73e8" }, ["Design"]),
    ]),
    L.Frame(new() { Padding = "xs", Background = "#e8f0fe", Radius = "xs" }, [
        L.Text(new() { FontSize = "xs", Color = "#1a73e8" }, ["Engineering"]),
    ]),
    L.Frame(new() { Padding = "xs", Background = "#fce8e6", Radius = "xs" }, [
        L.Text(new() { FontSize = "xs", Color = "#c5221f" }, ["Urgent"]),
    ]),
])

Dynamic tags from data

<cluster gap="xs" data-source="tags">
  <frame padding="xs" background="#f0f0f0" radius="xs">
    <text font-size="xs" data-value="name">Tag</text>
  </frame>
</cluster>