topic Adding a hyperlink button to a webpage header using Calcite? in Calcite Design System Questions

Adding a hyperlink button to a webpage header using Calcite?

ArianaBernal — Thu, 14 Apr 2022 20:32:11 GMT

I am trying to get a button working on the header of my web map app but for whatever reason it shows temporarily only while the page is loading but disappears once loaded. Is there something I am missing? here is the code I am using for it. It is a simple button with a link to another app

Current code:

Button showing before disappearing:

Re: Adding a hyperlink button to a webpage header using Calcite?

KittyHurley — Thu, 14 Apr 2022 21:40:35 GMT

Hi @ArianaBernal, Leveraging the code you provided above, was able to load the button as-expected, but it looks like you have other elements that may be conflicting, such as the calcite-switch and some menus.

There's also an alternative to calcite-button that might work in this case. If you are seeking to provide a solution that floats above other elements in the interface, you could use the calcite-fab (Floating Action Button) if you are looking for a button with more visual prominence. There are a few differences from button, such as rounded corners and box-shadows, but could solve other conflicting visual elements.

A similar implementation to the above screenshot:

<calcite-fab color="blue" icon="map-pin" text-enabled text="Address Checker"></calcite-fab>

Otherwise, if FAB doesn't seem like a good fit for this use case, can you provide a codepen that reproduces the issue?

Re: Adding a hyperlink button to a webpage header using Calcite?

ArianaBernal — Fri, 15 Apr 2022 15:04:16 GMT

Hey Kitty,

I have attempted the calcite-fab as well but I am still getting the same issue, I would ideally like to add this button next to the toggle but am not finding a way to get them to sit next to one another. Here is a codepen of the issue. Thank you.

Codepen Header Issue

Re: Adding a hyperlink button to a webpage header using Calcite?

KittyHurley — Fri, 15 Apr 2022 18:37:21 GMT

@ArianaBernal, Thank you for the Codepen for the additional context.

We recommend moving the header slot inside the calcite-shell. Then add some CSS .class selectors to the header slot, controls, and calcite-switch to align them in the header.

Code snippet below, and a full Codepen example.

Re: Adding a hyperlink button to a webpage header using Calcite?

ArianaBernal — Fri, 15 Apr 2022 18:58:00 GMT

This should work, thank you for your help and advice!