Row
Logical horizontal flow, wrapping by default.@gemologic/sheen · layoutPlayground
<Row align="center" gap="md" justify="start" wrap><Button>Save</Button><Button>Cancel</Button></Row>Variant matrix
Row composition
gap: none
gap: xs
gap: sm
gap: md
gap: lg
gap: xl
align: start
align: center
align: end
align: stretch
justify: start
justify: center
justify: end
justify: between
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/layout/Layout.tsx- Tokens
--sheen-space-block-md--sheen-space-inline-md
Accessibility
Role: presentation layoutKeyboard: No component-owned keysDo
- Preserve logical DOM order and use token spacing.
Do not
- Do not use layout wrappers to invent inaccessible keyboard order.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
wrap | boolean | true | Wrap onto additional lines when inline space is exhausted. |
gap | Spacing | md | Role-based spacing that follows the active density. |
align | Alignment | center | Cross-axis alignment without changing DOM or keyboard order. |
justify | Justification | start | Main-axis distribution without reversing content order. |