nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to create a calcite button that looks like a link?

ForrestLin

Find more posts tagged with

Accepted answers

KittyHurley

@ForrestLin You can use CSS to fit your use case, perhaps something like: https://codepen.io/geospatialem/pen/gONOLVG

<style>
  calcite-button[href] {
    --calcite-color-brand: var(--calcite-color-text-link);
    text-decoration: underline solid var(--calcite-color-text-link);
  }
</style>

<calcite-button appearance="transparent" href="https://developers.arcgis.com/calcite-design-system/components/button">Button with a link</calcite-button>
<calcite-button>Button with no link</calcite-button>

All comments

KittyHurley

@ACrateau Yes, you can do so using the --calcite-font-size-relative-base and --calcite-font-weight-normal (deprecated) tokens: https://codepen.io/geospatialem/pen/ZYpayqW.

#custom-btn {
    --calcite-font-size-relative-base: var(--calcite-font-size-relative-lg);
  /* Note that --calcite-font-weight-normal is deprecated, but still supported in Button */
  --calcite-font-weight-normal: var(--calcite-font-weight-bold);
}

While --calcite-font-weight-normal is supported it is deprecated, but the team is working on support for the replacement --calcite-font-weight-regular token soon. Additional information can be sought and followed via issue #14190.

AdamCrateau

@KittyHurley Is it possible to use the same logic to increase the default font size and weight of a button's text? I'm trying the same approach you provided here and adding the CSS properties font-weight and font-size, but the renderer is ignoring them - any thoughts?

ForrestLin

@KittyHurley

Thank you!

KittyHurley

@ForrestLin You can use CSS to fit your use case, perhaps something like: https://codepen.io/geospatialem/pen/gONOLVG

<style>
  calcite-button[href] {
    --calcite-color-brand: var(--calcite-color-text-link);
    text-decoration: underline solid var(--calcite-color-text-link);
  }
</style>

<calcite-button appearance="transparent" href="https://developers.arcgis.com/calcite-design-system/components/button">Button with a link</calcite-button>
<calcite-button>Button with no link</calcite-button>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.