Buttons
Height, letter case and letter spacing of every button in the theme.
What it controls
The shape of every button: the solid primary button, the outline button, the buttons in the cart drawer and the buy box. Button height sets the height in pixels; wide buttons keep their padding. Use uppercase button labels switches the label case for all buttons at once. Button letter spacing adds tracking, in hundredths of an em, and is mostly useful with uppercase labels.
Colors are not set here. A button takes Primary button and Primary button label from the color scheme of its section. Corner radius is under Layout.
How it connects
All sections, blocks and the cart read these three settings. The sticky buy bar and the quick view use the same button.
Setting it up
- Decide on uppercase or not. This is a brand decision more than a design one.
- Set Button letter spacing to 6 to 8 with uppercase, 0 to 2 without.
- Leave Button height at 48 unless the rest of your interface is unusually compact.
Settings
| Setting | Type | What it does |
|---|---|---|
| Button height | Range | Height of every button in pixels. 48 works for a mouse and a thumb alike.40 to 56 px · Default: 48 |
| Use uppercase button labels | Checkbox | Sets all button labels in capitals. Pair it with some letter spacing.Default: on |
| Button letter spacing | Range | Extra space between the letters of button labels. Needed with uppercase labels, unnecessary without.0 to 12 · Default: 7 |
Tips
- Uppercase labels need letter spacing to stay readable. If you switch uppercase off, bring letter spacing down to 0 to 2, or the words fall apart.
- 48 px is the height that works for both a mouse and a thumb. Go lower only for a very dense design.
- Button colors come from the color scheme of the section the button sits in, not from here.