Sizes
Size tokens including the control height scale
sizes.control.xs–xl are the shared heights for buttons, inputs, and other
controls. Recipes should use these instead of raw spacing steps.
| Token | Value |
|---|---|
control.xs | {sizes.6} |
control.sm | {sizes.7} |
control.md | {sizes.8} |
control.lg | {sizes.10} |
control.xl | {sizes.12} |
Spacing steps (1, 2, 4, …) and font sizes also multiply
--scale-factor. Named sizes (xs–8xl) are container widths, not control
heights.
control
Name
Value
control.xs
var(--chakra-sizes-6)
control.sm
var(--chakra-sizes-7)
control.md
var(--chakra-sizes-8)
control.lg
var(--chakra-sizes-10)
control.xl
var(--chakra-sizes-12)
tokenSizes
Name
Value
Pixel
1
calc(0.25rem * var(--scale-factor))
NaNpx
2
calc(0.5rem * var(--scale-factor))
NaNpx
3
calc(0.75rem * var(--scale-factor))
NaNpx
4
calc(1rem * var(--scale-factor))
NaNpx
5
calc(1.25rem * var(--scale-factor))
NaNpx
6
calc(1.5rem * var(--scale-factor))
NaNpx
7
calc(1.75rem * var(--scale-factor))
NaNpx
8
calc(2rem * var(--scale-factor))
NaNpx
9
calc(2.25rem * var(--scale-factor))
NaNpx
10
calc(2.5rem * var(--scale-factor))
NaNpx
12
calc(3rem * var(--scale-factor))
NaNpx
14
calc(3.5rem * var(--scale-factor))
NaNpx
16
calc(4rem * var(--scale-factor))
NaNpx
20
calc(5rem * var(--scale-factor))
NaNpx
24
calc(6rem * var(--scale-factor))
NaNpx
28
calc(7rem * var(--scale-factor))
NaNpx
32
calc(8rem * var(--scale-factor))
NaNpx
36
calc(9rem * var(--scale-factor))
NaNpx
40
calc(10rem * var(--scale-factor))
NaNpx
44
calc(11rem * var(--scale-factor))
NaNpx
48
calc(12rem * var(--scale-factor))
NaNpx
52
calc(13rem * var(--scale-factor))
NaNpx
56
calc(14rem * var(--scale-factor))
NaNpx
60
calc(15rem * var(--scale-factor))
NaNpx
64
calc(16rem * var(--scale-factor))
NaNpx
72
calc(18rem * var(--scale-factor))
NaNpx
80
calc(20rem * var(--scale-factor))
NaNpx
96
calc(24rem * var(--scale-factor))
NaNpx
0.5
calc(0.125rem * var(--scale-factor))
NaNpx
1.5
calc(0.375rem * var(--scale-factor))
NaNpx
2.5
calc(0.625rem * var(--scale-factor))
NaNpx
3.5
calc(0.875rem * var(--scale-factor))
NaNpx
4.5
calc(1.125rem * var(--scale-factor))
NaNpx
namedSizes
Name
Value
max
max-content
min
min-content
fit
fit-content
prose
60ch
full
100%
dvh
100dvh
svh
100svh
lvh
100lvh
dvw
100dvw
svw
100svw
lvw
100lvw
vw
100vw
vh
100vh
fractionalSizes
Name
Value
1/2
50%
1/3
33.333333%
2/3
66.666667%
1/4
25%
3/4
75%
1/5
20%
2/5
40%
3/5
60%
4/5
80%
1/6
16.666667%
2/6
33.333333%
3/6
50%
4/6
66.666667%
5/6
83.333333%
1/12
8.333333%
2/12
16.666667%
3/12
25%
4/12
33.333333%
5/12
41.666667%
6/12
50%
7/12
58.333333%
8/12
66.666667%
9/12
75%
10/12
83.333333%
11/12
91.666667%
breakpointSizes
Name
Value
breakpoint-sm
480pxpx
breakpoint-md
768pxpx
breakpoint-lg
1024pxpx
breakpoint-xl
1280pxpx
breakpoint-2xl
1536pxpx
largeSizes
Name
Value
3xs
14rem
2xs
16rem
xs
20rem
sm
24rem
md
28rem
lg
32rem
xl
36rem
2xl
42rem
3xl
48rem
4xl
56rem
5xl
64rem
6xl
72rem
7xl
80rem
8xl
90rem