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.
For the complete documentation index, see llms.txt. This page is also available as Markdown.
#Add a button
Step 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.
Step 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.
Step 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.
#Set where a button goes
Step 1: Select the button
Click it on the canvas.
Step 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.
Step 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. |
| 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. |
| 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.