Pending
Confirmed
Cancelled
Completed
Invited
Paid
Unpaid
Refunded
Homecomponentsstructural
Cluster
A container that lays items horizontally allowing them to wrap.
Use a Cluster to layout items horizontally with equal spacing and let them wrap if needed.
Spacing
Use the spacing property to adjust the spacing between the items.
1
2
3
4
5
6
7
Horizontal Alignment
Clustered items can be horizontally aligned using the alignH property. The alignment switches automatically based on writing direction.
1
start
3
1
center
3
1
end
3
Vertical Alignment
Clustered items can be aligned vertically using the alignV property.
start
center
end
Reversing Items
Use the reverse property to reverse the order of the items.
Collapsing below a breakpoint
Use the collapseBelow property for collapse the list below a specific breakpoint.
After collapsing, the Cluster effectly becomes a Stack except that you cannot stretch the items. They use their own dimensions.
1
2
3
4
5
6
7
Examples
Tags
A common use of Cluster is to group a list of tags together.
API
children
Required
ReactNode
as
div
span
ol
ul
spacing
collapseBelow
mobile
tablet
desktop
wide
alignH
"center" | "end" | "start" | "spaced" | ResponsiveArray<4 | 2 | 3 | 1, "center" | "end" | "start" | "stretch" | "spaced" | null> | { mobile?: "center" | "end" | "start" | "stretch" | "spaced"; tablet?: "center" | ... 4 more ...; desktop?: "center" | ... 4 more ... | undefined; wide?: "center"...
alignV
"center" | "end" | "start" | "spaced" | { mobile?: "center" | "end" | "start" | "stretch" | "spaced"; tablet?: "center" | "end" | "start" | "stretch" | "spaced"; desktop?: "center" | ... 4 more ... | undefined; wide?: "center" | ... 4 more ... | undefined; } | ResponsiveArray<...> | undefined
reverse
true
false
data
DataAttributeMap