Buttons with link functionality

[jkiga]

Hi Team!

I have some questions about buttons with link functionality.
The paste guidelines suggest to use buttons with link functionality when we want to navigate the user, the addition of the icons help indicate the action performed on click is a navigation.
Is it possible to get more context around the term "navigate"?

Does navigate mean:

• going somewhere else on the same page
• going to a completely new page
• going from one dedicated place in the side navigation to another
• displaying new UI

I've looked at other parts of console, and navigate means that you are going from one dedicated place in the side navigation to another. The A2P homepage currently uses buttons with link functionality and I just want to make sure we are utilizing them in the correct way.

Thank you so much for all your help!

[andioneto]

Hi @jkiga 👋

I have floated this to the team and will have some clarifying information within the next few days. Thank you for the question!

[andioneto]

Hello again, @jkiga 👋

We define navigate to mean any route based URL change.

So taking a look at your list of examples 👇

going somewhere else on the same page ✅

This is only navigation when that change in position (e.g. "going somewhere") is caused by a change in location (e.g the URL). For example, in-page navigation using id attributes and matching hashed href attributes on the anchor.

going to a completely new page ✅

If the change in page implies a change in location (URL), then yes.

going from one dedicated place in the side navigation to another ✅

Clicking on a navigation item and being redirected to a new location (e.g, new page new URL), is in fact navigation.

displaying new UI 🟨

Not necessarily. You can couple page content/UI to location, but they are not necessarily always coupled.

[jkiga]

@andipants12 thank you for reply! This is very helpful!
Just one more question - for URL changes, does that mean any change in the URL or just the domain, or both count?

The specific instance I am debating in my project is on the A2P home page (left screen) is whether to have an arrow appear in the button. When the user clicks the "Register for A2P" button, the side navigation and domain remain the same, but the URL has added additions to it. It refreshes as a different page, but it is still within the "A2P Messaging" section. I'm wondering in this instance, does the "Register for A2P" button need an arrow, and I'm thinking from the definition of navigate, it might?

Let me know what you think!

[jkiga]

Hi @andipants12, just following up on this thread. Thank you!

[TheSisb]

Hi @jkiga,

In your example it looks like clicking the Button is taking the user to a new page. Both the URL and the view change. In this case you will want to use the Anchor component ideally, or a Button with link functionality if you really need the button styling.

You can read more about when and how to use the right components on the respective pages: Anchor docs - button docs

for URL changes, does that mean any change in the URL or just the domain, or both count?

Any URL change (domain and route and hash) count as navigation which means we suggest using an Anchor for accessibility.

[jkiga]

Thank you @TheSisb for your response! This helps alot :)