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

Vind meer berichten getagd met

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>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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