Button
A link styled as a primary, secondary or accent button, or as a plain text link, in three sizes, optionally full width.
- In the editor
- Button
- Where it goes
- The Section section and inside Groups
- Settings
- 7
Styles
| Style | Use it for |
|---|---|
| Primary | The main action of a section – one per section reads best. |
| Secondary | A second, quieter action next to the primary one. |
| Accent | An action in the color scheme's accent color – for highlights and offers. |
| Text link | A quiet underlined link, for Learn more or View all. |
Colors come from the section's color scheme; corners follow Button and chip corner radius in Theme settings › Shapes, and the font follows Button font in Typography.
Options
- Size: Small, Regular or Large.
- Full width: fills the width of its column – useful on cards and on phones.
- Open in a new tab: for links to other websites. Use it sparingly.
- Alignment: Like the section, or left, center or right.
For two buttons side by side, add a Button row – a Group set up as a row – and put the buttons inside.
All settings
Block: Button7 settings
| Setting | Options | Default |
|---|---|---|
| Label | Text | Sample text |
| Link | Link | – |
| Open in a new tab | Checkbox | Off |
| Style | Primary · Secondary · Accent · Text link | Primary |
| Size | Small · Regular · Large | Regular |
| Full width | Checkbox | Off |
| Alignment | Like the section · Left · Center · Right | Like the section |
Related
GroupHolds other blocks – including groups – in a column or a row; turn on a background for cards.TextRich text in three sizes, with a softer color option and a comfortable maximum line length.SectionBuild any section from blocks – headings, text, buttons, images, spacers, dividers and nestable groups.