Block

Group components into a block with consistent space between.

Props

alignment
GoabBlockAlignment
Primary axis alignment of child components.
Defaults to normal.
direction
GoabBlockDirection
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.
alignment
GoabBlockAlignment
Sets the primary axis alignment of child components.
direction
GoabBlockDirection
Sets the stacking direction of child components.
gap
Spacing
Sets the spacing between items. Uses design system spacing tokens.
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.
testId
string
Sets the data-testid attribute for automated testing.
width
string
Sets the width of the block container. Defaults to max-content.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
alignment
"center" | "start" | "end" | "normal"
Primary axis alignment of child components.
Defaults to normal.
direction
"row" | "column"
Stacking direction of child components.
Defaults to row.
gap
Spacing
Spacing between items. Uses design system spacing tokens.
Defaults to m.
max-width
string
Sets the maximum width of the block container.
min-width
string
Sets the minimum width of the block container.
stretch
boolean true | false
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. Defaults to max-content.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Examples

Add a record using a drawer

Ask a user for an address

Ask a user for an Indian registration number

Card view of case files

Copy to clipboard

Display user information

Error pages

Error pages preview
More info

Filter data in a table

Question page

Question page preview
More info

Review and action

Show multiple actions in a compact table

Show multiple tags together

Show number of results per page

Other

Use Block for general layout and spacing. Use ButtonGroup for semantically related action buttons.

Header section

Main content area

Footer section

Don't use a container for general page layout. Containers are for visual emphasis and grouping content.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

View old component docs