# Button

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

1. In the editor, open the inserter and choose **Primary button**, **Secondary button** or **Tertiary button**. [Add a block](https://lovelyrender.com/documentation/add-block/) details the ways to insert a block.
2. Type the label. As long as the button is empty, it shows **Button text**.
3. In the **Settings** tab, **Link** panel, choose the button’s destination.

**Warning:** Without a link, the button is neither clickable nor reachable by keyboard. Leave it without a destination only for a decorative label.

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](https://lovelyrender.com/documentation/save-block-style/) details these steps.

## Settings tab

### Choose the destination

1. 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**.
2. 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.
3. 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.

**Tip:** Under three featured projects, an “All our projects” button linked to the Projects type archive follows the archive’s address. Linked to **Home page**, a button leads to the home page in the language of the page being read.

### 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 Link panel of a button linked to https://www.vinsdeloire.fr/: the address pill with its Edit and Remove the link buttons, then Hide the link from search engines, Link opening, Accessible name, Nofollow and Open in a new tab.](https://static.lovelyrender.com/uploads/2026/10/877-doc-blocs-lien.png)

The five overlay openings show the target over the page, without reloading it. [Open a modal or a side panel](https://lovelyrender.com/documentation/open-modal-side-panel/) explains how to format them.

**Tip:** A “Contact us” button set to **On the right side** opens the contact page in a side panel. The visitor fills in the form without leaving the page they were reading. The contact page remains a full page of its own.

### 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. |

**Tip:** On a “Write to us” button using `mailto:`, turn on **Hide the link from search engines**. The bots that harvest addresses no longer find the plain email address in the page’s code. The button’s label must not show it.

**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](https://lovelyrender.com/documentation/icon-block/) block: **Icons**, **Animated** and **Custom**. The **Remove** button empties a slot.

![The Icons panel of a button: the Left and Right tabs, Right open, the arrow chosen under Chosen icon, the sources Icons, Animated and Custom, then the Search an icon field.](https://static.lovelyrender.com/uploads/2026/10/878-doc-blocs-bouton-icones.png)

- 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](https://lovelyrender.com/documentation/color-block/). The button is itself a link: it has no link color. |
| **Typography** | [Style text](https://lovelyrender.com/documentation/format-text/) |
| **Size & Spacing**, **Borders**, **Effects**, **Transitions** | [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-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](https://lovelyrender.com/documentation/adopt-catalog-design/)).

**Warning:** The **Focus** state is the only landmark for a person going through the page with the keyboard. Take care of it.

## Animations tab

The **Animations** tab makes the button appear or move. [Animate a block](https://lovelyrender.com/documentation/animate-block/) describes the effects.

## Place a button

A button is placed alone or inside another block: a [Container](https://lovelyrender.com/documentation/container-block/), 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](https://lovelyrender.com/documentation/check-accessibility/) 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 `#tarifs` on every page that carries a block with this anchor.

## See also

- [Container](https://lovelyrender.com/documentation/container-block/)
- [Icon](https://lovelyrender.com/documentation/icon-block/)
- [Open a modal or a side panel](https://lovelyrender.com/documentation/open-modal-side-panel/)
- [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/)