topic Calcite button: space between text and icon in ArcGIS Hub Questions

Calcite button: space between text and icon

lmarun — Fri, 01 Nov 2024 21:18:13 GMT

I'd like to create a space between the text and a calcite icon in a button. I do not want that space underlined. I've made several attempts, but am having no luck.

Please my code below and an image of the result.

<a class="btn btn-primary" href="https://webpage.com/" role="button" target="_blank">Website<calcite-icon icon="launch-2" text-label="external link" aria-hidden="false" aria-label="external link" role="img" scale="s" alignment="icon-start-space-between" calcite-hydrated=""></calcite-icon></a>

Re: Calcite button: space between text and icon

JenniferAcunto — Mon, 04 Nov 2024 19:38:32 GMT

<a class="btn btn-primary" href="https://webpage.com/" role="button" target="_blank">Website<calcite-icon icon="launch-2" style="margin-left: 3px;" text-label="external link" aria-hidden="false" aria-label="external link" role="img" scale="s" alignment="icon-start-space-between" calcite-hydrated=""></calcite-icon></a>

Re: Calcite button: space between text and icon

BrianRollison — Thu, 07 Nov 2024 18:17:32 GMT

@lmarun you will get this spacing right out of the box using a calcite button within the Text Card, you can use the Calcite Components explorer to play around with styling and simply copy/paste into your Text Card's HTML editor: https://developers.arcgis.com/calcite-design-system/components/button/.

At a high-level the basic visual props would be <calcite-button icon-end="launch">Website</calcite-button>.

Re: Calcite button: space between text and icon

lmarun — Thu, 14 Nov 2024 22:30:48 GMT

@BrianRollison and @JenniferAcunto, thank you for both of these great options!