Spacer

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

Slots