Adding a hyperlink button to a webpage header using Calcite?

[ArianaBernal]

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:

[KittyHurley]

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?

[ArianaBernal]

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  

[KittyHurley · Accepted solution]

@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.

<style>
.custom-header {
  display: flex;
  padding: 0 1rem;
  background-color: var(--calcite-ui-foreground-1);
}

.custom-header-controls {
  margin-inline-start: auto;
  display: flex;
  align-self: center;
}

.custom-label-wrapper {
  display: flex;
  border: 1px solid var(--calcite-ui-border-1);
  margin-inline-start: 1rem;
  padding: 0 0.5rem;
}

.header-switch {
  margin: 0 0.5rem;
}
</style>

<calcite-shell content-behind hidden>
  <!--  Header slot  -->
  <div slot="header" class="custom-header">
    <h2 id="header-title">
      <!-- Dynamically populated -->
    </h2>
    <!-- Address Checker button -->
    <div class="custom-header-controls">
      <calcite-button appearance="clear" color="blue" href="{your-custom-url}" icon-start="map-pin">Address Checker</calcite-button>
      <!-- Dark Mode Switch -->
      <calcite-label disable-spacing layout="inline" class="custom-label-wrapper">
        <calcite-icon icon="brightness" scale="s"></calcite-icon>
        <calcite-switch class="header-switch"></calcite-switch>
        <calcite-icon icon="moon" scale="s"></calcite-icon>
      </calcite-label>
    </div>
  </div>
...Other calcite-shell content...
</calcite-shell>

[ArianaBernal]

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