Buttons
The shape and lettering of every button in the store. Pave has two kinds: the primary button, filled, for the main action on a page such as Add to cart; and the secondary button, outlined, for everything alongside it. Their colors come from the section’s color scheme, under Colors.
Settings
Primary button
- Border thickness. Range: 0 to 4 px. Default: 0 px. At 0 px the button has no border.
- Corner radius. Range: 0 to 100 px. Default: 100 px, a full pill. 0 px gives square corners, and higher values round them until the button becomes a pill.
- Font. Body (default), Accent or Heading. The fonts themselves are set under Typography.
- Text case. Default (default) or Uppercase.
Secondary button
- Border thickness. Range: 0 to 4 px. Default: 1 px. At 0 px the button has no border.
- Corner radius. Range: 0 to 100 px. Default: 100 px. As for the primary button, 0 px gives square corners.
- Font. Body (default), Accent or Heading.
- Text case. Default (default) or Uppercase.
Pills
- Corner radius. Used for active filter chips and variant pills. Range: 0 to 40 px. Default: 40 px.
Tips
- Keep the two radii the same. A pill-shaped primary button next to a square secondary one looks like two different design systems. Change both together.
- Give the secondary button a border. At 0 px an outlined button has no outline, and it reads as plain text that happens to be clickable.
- Match the pills to the buttons. If you square off the buttons, bring Pills down too, so the variant picker and filters follow the same shape.
- Uppercase wants a little restraint. It suits short labels like
ShoporAdd to cart. With the heading font at a heavy weight it can start to shout.