Buttons
Define your primary and secondary button styles once and apply them across every block.
The Buttons panel in Global Settings sets the look of your site's buttons. You style a Primary and a Secondary button variant, and blocks that render buttons pick up these styles automatically (via the sp-styble-button-primary and sp-styble-button-secondary classes).
Primary and secondary variants
The panel has two tabs:
- Primary — your main call-to-action button. By default it has a filled blue-violet (
#4D4DFF) background with white text. - Secondary — a complementary button. By default it has white fill with blue-violet text and border.
Each variant is styled independently with the same set of controls.
Normal and hover states
Within each variant, a Normal / Hover toggle lets you style the resting and hover appearance separately. The available controls for each state:
| Control | What it sets |
|---|---|
| Text Color | Button label color. |
| Button Background Type | Solid color or gradient background. |
| Border | Border color, style and width. |
| Border Radius | Corner rounding (px, %, em). |
| Box Shadow | Toggle a box shadow and configure it (or pick a global shadow preset). |
Typography and padding
Above the state controls, each variant also has:
- Typography — font family, weight, style, transform, decoration, size, line height and spacing for the button label.
- Padding — inner spacing on all four sides (px, %, em).
Default values
The shipped button defaults are:
| Property | Default |
|---|---|
| Padding | 12 px top/bottom, 24 px left/right |
| Border width | 1.5 px on all sides |
| Border radius | 4 px on all corners |
| Border style | Solid |
| Font weight | 500 |
| Font size | 16 px |
| Line height | 1.3 |
| Box shadow | Enabled, using the Light (2dp) global preset |
Reuse global shadows
The button's box-shadow control can reference a preset from the Shadows panel, keeping elevation consistent with the rest of your design.
Tips
- Use Primary for the single most important action on a page and Secondary for everything else.
- Set hover states deliberately — they're a key part of how interactive your site feels.
- Match button colors to your Colors palette so buttons stay on-brand if you switch palettes.
- See the Global Settings overview for how all panels fit together.