Spacing
A collection of tokens related to spacing between elements.
// Best used with components with utility props<Box padding="small">...</Box>// or if padding props are not available...<View style={{ padding: spacing.small }}>...</View>
Here are the different values that each token resolves to.
Token | Value | x8 multiplier | |
---|---|---|---|
"none" | 0 | 0x | |
"xsmall" | 4 | 0.5x | |
"small" | 8 | 1x | |
"medium" | 12 | 1.5x | |
"large" | 16 | 2x | |
"xlarge" | 24 | 3x | |
"xxlarge" | 32 | 4x | |
"xxxlarge" | 40 | 5x | |
"6x" | 48 | 6x | |
"7x" | 56 | 7x | |
"8x" | 64 | 8x | |
"9x" | 72 | 9x | |
"10x" | 80 | 10x |