How to Add a Clickable Text Button in Google Data Studio - 4 Styles, No Hacks Needed

Do you know you can create a button in Data Studio in less than 5 minutes? No hacks needed.

A button allows users to navigate to a page within a report or external website easily. This is useful if you have any documentation, a.k.a. READ ME page that the report users would like to refer to directly from the dashboard.

How to Create a Clickable Button in Data Studio

It’s very simple to create a clickable button in Data Studio. If you come from previous article which we’ve covered how to create a hyperlink text, you are actually half way there. Feel free to skip to this section right away!

Before we start, I do believe video tutorial is a better way to learn a data visualisation tool. So this article would only touch the basics of creating a button. If you wish to learn more about this topic, I highly recommend you to watch the video below, it’s only 5 min :)

If you’re still here, let’s get started!

Step 1: Add Button Display Text

To add a button, you need to first add a text box. Then, enter the text you wish to show up in the button.

How to Add Text Elements in Google Data Studio

Next, select the text and at the property panel, click the link icon to insert a URL link.

You’d see a window pops up, we can see the display text column is already pre-filled with the text we selected earlier. So you can just leave it.

Next, you can choose which page or url you would like to link to.

How to Insert Text Link in Data Studio Report

Here you have 3 options: 
  • dynamic page linking
  • link to specific page within the report
  • ANY url links

We’ll use the second option for demonstration purpose. Click on the placeholder for URL link and you’ll see a dropdown menu. In the menu, select any page.

For the last method, it’s actually quite straightforward. Just copy-and-paste the url link.

Again, video tutorial have more details about the different page-linking options and how to configure them.

Step 3: Format the Text Hyperlink

The problem with this button here is that it doesn’t appear like a button.

Sample Text Hyperlink. Button Wanna-Be

Next we’ll change the text formatting and style to transform it to a button.

  • Set the text background colour to darker colour: e.g. dark blue.

  • Set the text colour to lighter colour: e.g. white.

  • Set the border radius for a round-edged button style.
  • (Optional) Add border shadow if you wish to make it looks more 3D.

Like this tutorial? Let me know by tagging my instagram account or leave a comment on my youtube video! Thank you ❤️


See Also

Back to blog