Radius

PRO

You can edit 8 Components for free. Get premium for unlimited access.

Radius values used in the components are derived from a 11-step scale.

Figma

Spacing values are derived from a 11-step scale, which is used for props such as margin and padding. These props accept numeric strings from borderRadius to, which correspond to the steps in the scale below.

Step
Base value
rounded_none
0 px
rounded_sm
2 px
rounded
4 px
rounded_md
8 px
rounded_lg
12 px
rounded_xl
16 px
rounded_2xl
20 px
rounded_3xl
24 px
rounded_4xl
28 px
rounded_5xl
32 px
rounded_full
9999 px

SwiftUI

Spacing values are derived from a 11-step scale, which is used for props such as margin and padding. These props accept numeric strings from borderRadius to, which correspond to the steps in the scale below.

Step
Base value
rounded_none
0 px
rounded_sm
2 px
rounded
4 px
rounded_md
8 px
rounded_lg
12 px
rounded_xl
16 px
rounded_2xl
20 px
rounded_3xl
24 px
rounded_4xl
28 px
rounded_5xl
32 px
rounded_full
9999 px

Jetpack Compose

Spacing values are derived from a 11-step scale, which is used for props such as margin and padding. These props accept numeric strings from borderRadius to, which correspond to the steps in the scale below.

Step
Base value
rounded_none
0 dp
rounded_sm
2 dp
rounded
4 dp
rounded_md
8 dp
rounded_lg
12 dp
rounded_xl
16 dp
rounded_2xl
20 dp
rounded_3xl
24 dp
rounded_4xl
28 dp
rounded_5xl
32 dp
rounded_full
9999 dp

React Native

Spacing values are derived from a 11-step scale, which is used for props such as margin and padding. These props accept numeric strings from borderRadius to, which correspond to the steps in the scale below.

Step
Base value
rounded_none
0 px
rounded_sm
2 px
rounded
4 px
rounded_md
8 px
rounded_lg
12 px
rounded_xl
16 px
rounded_2xl
20 px
rounded_3xl
24 px
rounded_4xl
28 px
rounded_5xl
32 px
rounded_full
9999 px

Discover more content

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version