# Buttons and links

Add a button from Add Elements, edit its label as text, and point it at a page, an anchor, a phone number, an email or a web address with the Link field.

## Add a button

1. **Select where it goes** Select a section or container to add the button inside it. With a leaf element selected, the button goes after it. With nothing selected it goes into the page's last section.
2. **Open Add Elements** Open **Add Elements** in the icon rail and find **Buttons**. The choices are **Primary** and **Secondary**. **Quick Add** also has a **Button** card.
3. **Click the card** The button is inserted and selected, and the **Inserting into** label told you where it would land.

All three cards insert the same element: a black pill button reading "Get Started" with white 14 pixel semibold text. Primary and Secondary differ only in their icon, so restyle the button afterwards in the Design tab.

## Change the label

A button label is text. Double-click the button on the canvas to edit it, or select it and use **Text Content** in the Content tab. Size, weight, colour and the rest of the typography are in the **Design** tab. See [Edit text](https://www.uova.com/help/build/editor/text).

## Set where a button goes

1. **Select the button** Click it on the canvas.
2. **Open the Content tab** The **Link** field sits below **Text Content** and above **Upload Media**. The floating toolbar above the button has the same link box.
3. **Type or pick the target** The placeholder reads `https://...`. As you type, the box suggests the pages of your site. Pick one to link to that page, or type an address. Press `Enter` or click elsewhere to save it.

| What you type | Accepted form | Example |
| --- | --- | --- |
| A web address | Starts with http:// or https:// | `https://example.com/menu` |
| An email link | `mailto:` and an address | `mailto:hello@example.com` |
| A phone link | `tel:` and 3 to 20 digits, with an optional leading +. Spaces, brackets, dots and hyphens are removed | `tel:+44 117 000 0000` is saved as `tel:+441170000000` |
| A place on the same page | `#` then a name that starts with a letter | `#contact` |
| A page of your site | A path starting with one `/` | `/about` |

Anything else is refused. The change is not saved, the box goes back to its previous value and a message reads "Links can be a web address, mailto:, tel:, #section or a /page path." That includes `javascript:`, `data:` and addresses that start with `//`. The first page of your site is always `/`.

Clearing the box removes your link, and the template's own routing for that button takes over again. UOVA does not check that an address exists, so open the page in a preview after you set it.

## Which elements have a Link field

Buttons, anything that already carries a link, and elements whose name or id contains cta, btn or button. Images, sections, containers and columns never show a Link field.

## Style a button

| Where | What you can set |
| --- | --- |
| Design tab | Size, colours, border, corner radius and shadow, for this button only. See [The Design inspector](https://www.uova.com/help/build/editor/design-inspector). |
| Design tab, Hover Styles | Preset hover effects (Scale Up, Lift, Brighten, Glow, Dim, Rotate) and individual hover colours. |
| Animate tab | An animation such as a hover Lift or a loop Pulse. See [Animations](https://www.uova.com/help/build/editor/animations). |
| Site Styles, Buttons tab | Five button styles for the whole site: Pill, Rounded, Sharp, Bold and Editorial. Shown on capitol, datum, fade, gloss, grove, hearth, keel, lueur, odessey and vanta only. |

## Limits

- There is no separate button editor. A button is a text element with a Link field.
- Button shape across the site is available only on the templates listed above.
- A form's submit button follows the form's own content. See [Forms and contact blocks](https://www.uova.com/help/build/editor/forms).

## Common questions

**How do I link to another page of my site?**

Type in the **Link** field and pick the page from the suggestions, or type its path, such as `/about`.

**How do I make every button look the same?**

On the supported templates use **Site Styles** then **Buttons**. Otherwise edit each button, or ask the AI chat to change them.

**My link was not saved. Why?**

The box refuses anything that is not a web address, mailto:, tel:, #section or /page path. Check for a missing https:// at the start.

**How do I open a phone dialler from a button?**

Enter `tel:` followed by the number, for example `tel:+441170000000`.

Source: https://www.uova.com/help/build/editor/buttons-and-links