Breakpoints

Guidance for using and tuning typography.

Use the Breakpoints prop to control the visual style of the button.

The typographic system is based on a 9 step scale, every step has a corresponding font-size, line-height and letter-spacing value which are all designed to be used in combination.

1. Mobile

Use the Mobile prop to control the visual style of the button.

Phone
Width
Height
Huawei P9
360 px
640 px
Google Pixel 7
360 px
800 px
iPhone SE
320 px
568 px
iPhone 13 mini
375 px
812 px
iPhone 15 Pro
393 px
852 px
iPhone 15 Pro Max
430 px
932 px

2. Tablet

Use the Tablet prop to control the visual style of the button.

Tablet
Width
Height
iPad mini 8.3
744 px
1133 px
iPad Pro 11"
834 px
1194 px
Surface Pro 8
1440 px
960 px

Discover more content

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Premium Version