Usage
This component is used in code only. See the Spacing documentation for more information.
The Spacer component provides spacing to any wrapped component. Spacing options are provided as a tuple that can
contain zero, one, two, three or four values, each of those being top, bottom, left, and right. The structure of
the tuple is very similar to how margin or padding properties work: specifying one value replicates them across the four
sides, two across top/bottom and left/right, etc. The values in the tuples are mapped to
the Spacing scale, which are small (S), medium (M), large (L), and xlarge (XL).
Use Spacer for single items in the screen that need to be spaced out. For groups of items,
use Grid or Stack components. Avoid using nested Spacer components.
Examples
Live Preview
Props
| Name | Description | Type | Default | Values |
|---|---|---|---|---|
all | Sets all 4 margins of the spacer. This property has the lowest priority which means that it will be overwritten by any other prop. | string | null, none, small, medium, large, xlarge | |
horizontal | Sets left and right margin of the spacer. Can be overwritten by `left` and `right` properties. | string | null, none, small, medium, large, xlarge | |
vertical | Sets top and bottom margin of the spacer. Can be overwritten by `top` and `bottom` properties. | string | null, none, small, medium, large, xlarge | |
top | Set the top margin of the spacer | string | null, none, small, medium, large, xlarge | |
right | Set the right margin of the spacer | string | null, none, small, medium, large, xlarge | |
bottom | Set the bottom margin of the spacer | string | null, none, small, medium, large, xlarge | |
left | Set the left margin of the spacer | string | null, none, small, medium, large, xlarge |
Slots
| Name | Description |
|---|---|
default | Default content slot |