Spacer
<caos-spacer>
deliberate space between two pieces, sized from the platform spacing scale
May be placed on a record page, an app’s home page and a page inside an app.
Inputs
Section titled “Inputs”| Name | Attribute | Description | Type | Default | Required |
|---|---|---|---|---|---|
size |
size, markup only |
How much space, as a step of the spacing scale: x-small, small, medium, large, x-large, xx-large or xxx-large, from 4px to 48px in the base theme. There is no pixel size, so a spacer follows the theme and cannot drift off the scale. | text — one of x-small, small, medium, large, x-large, xx-large, xxx-large | medium | Optional |
direction |
direction, markup only |
vertical is space between pieces stacked one above the other. horizontal is space between pieces side by side in a layout row, and never shrinks. | text — one of vertical, horizontal | vertical | Optional |
Events
Section titled “Events”This piece raises no events.
Nothing goes inside this piece.
Styling hooks
Section titled “Styling hooks”| Design token | What it controls |
|---|---|
--caos-space-1 |
The x-small space. |
--caos-space-2 |
The small space. |
--caos-space-3 |
The medium space. |
--caos-space-4 |
The large space. |
--caos-space-5 |
The x-large space. |
--caos-space-6 |
The xx-large space. |
--caos-space-7 |
The xxx-large space. |
Methods
Section titled “Methods”Not documented yet — this piece has not said.
Readable state
Section titled “Readable state”Nothing on this piece can be read back.
Styling parts
Section titled “Styling parts”Not documented yet — this piece has not said.
When to use it
Section titled “When to use it”When two pieces need a deliberate, declared distance between them and nothing else is arranging them: a gap before a group of related pieces, or room between two things in a row.
What to use instead
Section titled “What to use instead”- Layout — You want pieces aligned, centred or spread across a row. A spacer adds space; it aligns nothing.
- LayoutItem — The space belongs inside a column, around what it holds, which is the item’s padding.
Accessibility
Section titled “Accessibility”A spacer is hidden from assistive technology, takes no focus and adds nothing to the reading order. A screen reader hears the pieces on either side of it as neighbours. Do not use one to suggest a grouping that a heading or a section should state.
Examples
Section titled “Examples”Space between two pieces
Section titled “Space between two pieces”Two tags stacked, with a large spacer holding them apart.
{ "id": "example", "section": "Space between two pieces", "columns": 1, "items": [ { "id": "tag_1", "type": "component", "key": "tag", "children": [ "Above" ] }, { "id": "spacer_2", "type": "component", "key": "spacer", "inputs": { "size": "large" } }, { "id": "tag_3", "type": "component", "key": "tag", "children": [ "Below" ] } ]}<caos-tag>Above</caos-tag><caos-spacer size="large"></caos-spacer><caos-tag>Below</caos-tag>The spacing scale
Section titled “The spacing scale”Every step of the scale, each spacer under a tag that names its size.
{ "id": "example", "section": "The spacing scale", "columns": 1, "items": [ { "id": "tag_1", "type": "component", "key": "tag", "children": [ "x-small" ] }, { "id": "spacer_2", "type": "component", "key": "spacer", "inputs": { "size": "x-small" } }, { "id": "tag_3", "type": "component", "key": "tag", "children": [ "small" ] }, { "id": "spacer_4", "type": "component", "key": "spacer", "inputs": { "size": "small" } }, { "id": "tag_5", "type": "component", "key": "tag", "children": [ "medium" ] }, { "id": "spacer_6", "type": "component", "key": "spacer", "inputs": { "size": "medium" } }, { "id": "tag_7", "type": "component", "key": "tag", "children": [ "large" ] }, { "id": "spacer_8", "type": "component", "key": "spacer", "inputs": { "size": "large" } }, { "id": "tag_9", "type": "component", "key": "tag", "children": [ "x-large" ] }, { "id": "spacer_10", "type": "component", "key": "spacer", "inputs": { "size": "x-large" } }, { "id": "tag_11", "type": "component", "key": "tag", "children": [ "xx-large" ] }, { "id": "spacer_12", "type": "component", "key": "spacer", "inputs": { "size": "xx-large" } }, { "id": "tag_13", "type": "component", "key": "tag", "children": [ "xxx-large" ] }, { "id": "spacer_14", "type": "component", "key": "spacer", "inputs": { "size": "xxx-large" } } ]}<caos-tag>x-small</caos-tag><caos-spacer size="x-small"></caos-spacer><caos-tag>small</caos-tag><caos-spacer size="small"></caos-spacer><caos-tag>medium</caos-tag><caos-spacer size="medium"></caos-spacer><caos-tag>large</caos-tag><caos-spacer size="large"></caos-spacer><caos-tag>x-large</caos-tag><caos-spacer size="x-large"></caos-spacer><caos-tag>xx-large</caos-tag><caos-spacer size="xx-large"></caos-spacer><caos-tag>xxx-large</caos-tag><caos-spacer size="xxx-large"></caos-spacer>Side by side
Section titled “Side by side”A horizontal spacer holding two tags apart in a layout row.
{ "id": "example", "section": "Side by side", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "inputs": { "vertical_align": "center" }, "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "Left" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "inputs": { "flexibility": "no-shrink" }, "children": [ { "id": "spacer_5", "type": "component", "key": "spacer", "inputs": { "direction": "horizontal", "size": "xx-large" } } ] }, { "id": "layout_item_6", "type": "component", "key": "layout_item", "children": [ { "id": "tag_7", "type": "component", "key": "tag", "children": [ "Right" ] } ] } ] } ]}<caos-layout vertical-align="center"> <caos-layout-item> <caos-tag>Left</caos-tag> </caos-layout-item> <caos-layout-item flexibility="no-shrink"> <caos-spacer direction="horizontal" size="xx-large"></caos-spacer> </caos-layout-item> <caos-layout-item> <caos-tag>Right</caos-tag> </caos-layout-item></caos-layout>