Spacing

An overview of spacing in the App UI Kit.

The App UI Kit exposes a spacing scale. This scale is made up of a limited a range of numeric design tokens that are multiples of the base unit. By using these tokens, the size of and spacing between components remains consistent, which results in a more polished and visually harmonious experience.

Check out the Spacing design guidelines

Our design guidelines help you create a high-quality app that easily passes app review.

The tokens that make up the spacing scale are exposed as:

  • CSS variables
  • JavaScript variables
  • React component props (with exceptions)

You can use the CSS and JavaScript variables as you would any other design token.

In the case of React component props, some props only accept values from the spacing scale. For example, the Rows component has a spacing prop that sets the vertical margin between its children:

<Rows spacing="2u">
<Box>This is a box.</Box>
<Box>This is a box.</Box>
<Box>This is a box.</Box>
</Rows>
tsx

This code will render three rows of boxes with 2 units (16 pixels) between each row.

When passing values from the scale as props, the value takes the form of "𝑥u", where "𝑥" is a number on the scale and "u" is an abbreviation of "unit". An exception to this rule is when the value is "0", because this value doesn't have a suffix.

Units (u)Pixels (px)ExampleCSS variableJavaScript variable
00px
--ui-kit-space-0space0
0.5u4px
--ui-kit-space-050space050
1u8px
--ui-kit-space-1space1
1.5u12px
--ui-kit-space-150space150
2u16px
--ui-kit-space-2space2
3u24px
--ui-kit-space-3space3
4u32px
--ui-kit-space-4space4
6u48px
--ui-kit-space-6space6
8u64px
--ui-kit-space-8space8
12u96px
--ui-kit-space-12space12
Units (u)Pixels (px)ExampleCSS variableJavaScript variable
0.5u4px
--ui-kit-border-radiusborderRadius
1u8px
--ui-kit-base-unitbaseUnit
5.5u44px
--ui-kit-min-touchable-areaminTouchableArea