How to add buttons

Buttons are used to highlight an action for users to take, such as making a booking. They can link to other pages in your site or to external websites. Use them sparingly - try not to use more than one button in any single group of content.

Button styles

Ripple has 2 button styles.

Primary buttons

The primary button is blue and changes to a lighter blue when the mouse is hovering over it.

Secondary buttons

Secondary buttons are white with a blue outline.

We recommend using the secondary button style when a second action is needed in addition to a primary action, such as 'Submit' and 'Cancel' buttons.

How to create buttons

A button can be added to any content type (page template).

Buttons are added within the Basic text content component.

To insert a button:

1. Put your cursor on its own line.

2. Click the small page icon and choose primary/secondary button.
   
   

   Open

   

3. You’ll see a pale blue or grey button appear with dummy text. Click on the button and then click the pencil icon to edit the link.
   
   

   Open

   

4. Click in the Link URL field and:

   • if it’s a link to a page in the CMS, start typing the title of your destination page and select the correct page title

   • if it's a link to an external site, copy and paste the URL, including https://.

5. Click on the green tick to Save.

6. To edit the button label in the Title field, click your cursor to the right of the button. Use your left arrow to move the cursor into the dummy button label. Type your desired label and use your delete and backspace keys to remove the dummy label characters.

Information for designers

See our Ripple Design System guidance on the button component.