Block
Group components into a block with consistent space between.
Props
alignment
GoabBlockAlignment center | start | end | normal
Primary axis alignment of child components.
Defaults to
normal.
direction
GoabBlockDirection row | column
Stacking direction of child components.
Defaults to
row.
gap
Spacing
Spacing between items. Uses design system spacing tokens.
Defaults to
m.
maxWidth
string
Sets the maximum width of the block container.
minWidth
string
Sets the minimum width of the block container.
stretch
boolean
When true, children fill the cross-axis (e.g. width in a column block) regardless of alignment.
Defaults to
false.
testId
string
Sets a data-testid attribute for automated testing.
width
string
Sets the width of the block container.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Show multiple tags together
Other
Tip
Use Block for general layout and spacing. Use ButtonGroup for semantically related action buttons.
Header section
Main content area
Footer section
Don't
Don't use a container for general page layout. Containers are for visual emphasis and grouping content.
