The Button block places a call to action: a label, a destination and, if you want, an icon on each side. This page describes its three variants, its Link panel, its icons and its four states.
Add a button
- In the editor, open the inserter and choose Primary button, Secondary button or Tertiary button. Add a block details the ways to insert a block.
- Type the label. As long as the button is empty, it shows Button text.
- In the Settings tab, Link panel, choose the button’s destination.
Write what the button does, for example “Request a quote”. A person who goes through the page’s list of links with a screen reader only hears this text.
Choose the variant
The three entries in the inserter produce the same block. The variant marks the button’s importance. The registered styles offered to the button depend on it.
| Variant | Purpose | Shipped style |
|---|---|---|
| Primary button (default) | The main action: request a quote, buy or book. | Primary |
| Secondary button | A complementary action: learn more, compare or see the options. | Secondary |
| Tertiary button | A discreet action: cancel, go back or follow a secondary link. | Tertiary |
To change the variant of a button already placed, select it, then click one of the three icons at the top of the inspector. The name of each variant shows on hover. The block selector, the first icon in the toolbar, also offers the other two variants.
The button then takes the default style of its new variant and leaves the registered styles of the old one. The label, the link, the icons and the settings made by hand are kept.
A registered style saved from a button belongs to the variant active at that moment. A style created on a secondary button is only offered on secondary buttons. Set as default for, then Variation, gives it to every button of that variant you place. Save a block’s style details these steps.
Settings tab
Choose the destination
- In the Link panel, click in the Search or paste a URL… field. The list first offers Home page and the archive of each content type, under the label Template.
- Type at least two characters to search for a page, a post, a composition or a file in the media library. Each suggestion carries its type.
- For another destination, type its address and click the suggestion marked Address, at the bottom of the list.
| You type | The button |
|---|---|
https://… | Leads to another site. An address in http:// is not offered. |
mailto:contact@votresite.fr | Opens the visitor’s email app, address filled in. |
tel:+33123456789 | Offers to call this number. |
#tarifs | Scrolls down to the block of the page that carries the anchor tarifs. |
The chosen target becomes a pill. Edit and Remove link empty the target: until you choose another one, the button has no link. A link to a content of the site follows that content if its address changes.
Set the link
| Setting | Effect | Default value |
|---|---|---|
| Hide the link from search engines | Removes the plain address from the page’s code. The button stays clickable and usable with the keyboard. | Off |
| Link opening | In a modal, Modal at the bottom left, Modal at the bottom center, Modal at the bottom right, On the right side or Classic (in the browser tab). | Classic (in the browser tab) |
| Accessible name | The text announced by screen readers in place of the label. | Empty |
| Nofollow | Asks search engines not to follow the link or pass ranking value to it. | Off |
| Open in a new tab | Opens the target in a new tab. The page stays open behind. | Off |
The five overlay openings show the target over the page, without reloading it. Open a modal or a side panel explains how to format them.
The settings that gray out
| Situation | Effect on the panel |
|---|---|
| Link opening is not on Classic | Open in a new tab is unchecked and grayed out: an overlay opens no tab. |
| Hide the link from search engines is on | Nofollow and Open in a new tab are unchecked and grayed out. |
| The target is a composition or a file in the media library | Classic leaves the list of openings and switches to In a modal. The link is hidden from search engines and marked Nofollow. |
The target is a mailto:, a tel: or an anchor | Link opening and Open in a new tab disappear: these addresses open in place. |
| The target is the home page or an archive | Link opening disappears: these targets open like a page. |
Nofollow suits a sponsored link, a link to a site you do not want to vouch for and a service link with no editorial value. It does not hide the address: only Hide the link from search engines removes it from the code.
Styles tab
The button is set in four states: Default, Hover, Focus and Active. Focus styles the button that has keyboard focus. Active styles the button marked as active, for example when it serves as a tab.
Icons panel
The Icons panel is under the row of states. Its Left and Right tabs place an icon on each side of the label, with the same selector as the Icon block: Icons, Animated and Custom. The Remove button empties a slot.
- An icon is chosen per state: the Hover one shows when the pointer passes over the button. A state with no icon keeps the one from Default.
- An icon is the same on all screens.
- An animated icon placed on a button moves on hover. For another trigger, place an Icon block next to the button.
The other panels
| Panel | Guide |
|---|---|
| Colors | Color a block. The button is itself a link: it has no link color. |
| Typography | Style text |
| Size & Spacing, Borders, Effects, Transitions | Set size, borders and effects |
The three shipped styles remove the underline that a browser puts under a link. The Buttons part of the design catalog gives a look to all the site’s buttons (Adopt a design from the catalog).
Animations tab
The Animations tab makes the button appear or move. Animate a block describes the effects.
Place a button
A button is placed alone or inside another block: a Container, a table cell, a tab panel, a navigation or a list’s card. For a row of buttons, put them in a Container set to Flex and set the gap on the container.
A slideshow slide only accepts a paragraph or a heading. To place a button on an image, set the image as the background of a Container and place the button inside.
Accessibility
- A button that only shows an icon needs an Accessible name. Leave this field empty as soon as the button carries a visible label.
- A button’s icons are decorative: screen readers do not announce them.
- When Open in a new tab is checked, screen readers announce “opens in a new tab”. Do not write “new window” in the label.
The editor’s Accessibility panel flags as an error a button with no visible text or accessible name: Button with no visible text or accessible name. Fill in “Accessible name” in the Link panel. Check the accessibility of your pages describes the panel.
Limits
- The button has no HTML anchor: to target a button, place the anchor on the container around it.
- A bare anchor,
#tarifs, targets the page where the button is shown. Placed in a template or a composition, it leads to#tarifson every page that carries a block with this anchor.