Start
In the docs

More pieces

Buttons and links

A button is text with a background that goes somewhere or does something. A link is the same without the background: a word, or a whole box, that takes the shopper to another page.

Shop the collectionOur storyDelivery and returns →
A filled button, an outlined one, and a text that's a link. All three go somewhere; their looks are just Style.

How to make one

  1. Type the words with Text, or draw a box.
  2. Choose ⋯ › Turn into › Button or Link.
  3. Under Label and link in its Design tab, say where it goes: /shop, /about, or a full web address.

Design

Label and link
The words, and where it goes.
Background, Text colour
Buttons start in your accent colour, the one shoppers learn means “tap here”.
Corners, Border
Round them all the way for a pill, or give a button only an outline.
Padding
Room around the words. Keep buttons at least 44×44 so fingers can find them on a phone; the Check tells you when one is smaller.

Behaviour

A button doesn't have to go anywhere. Under When clicked it can open a drawer, add to cart, set a switch and more. See Click actions.

Good to know

  • Keep the accent colour for things shoppers can tap. The Check reminds you when it lands on something that isn't.
  • A button inside a product card can read the product's page: set its Shows to Page.

Recipes that use it