How do you style the text in a calcite button

ACrateau — Tue, 24 Mar 2026 17:21:28 GMT

I'm using my own CSS stylesheet for the <calcite-button> element, but have not been successful at increasing the default size and font-weight of the text in the button. I've set the [scale] to "l" for large and it's not large enough.

I'm working within ArcGIS Hub and wanting to make a prominent button that directs users to another application (loads on a separate tab). I'm using the calcite-button within a text element on the page. Here is my current HTML. the corner-radius and button-padding styles are working, the font size and weight are not...

<style>

calcite-button{

--calcite-button-corner-radius: 5px;

--calcite-internal-button-padding-x: 30px;

font-size: var(--calcite-font-size-relative-xl);

font-weight: var(--calcite-font-weight-semibold);

}

</style>

<calcite-button appearance="solid" target="_blank" text-label="Submit Request" scale="l" href="xyz" alignment="center" kind="brand" type="button" width="auto" split-child="false" calcite-hydrated="">Submit Request</calcite-button>

Re: How do you style the text in a calcite button

ACrateau — Tue, 24 Mar 2026 20:46:41 GMT

I ended up using a standard anchor <a> element styled as a button. Using the --calcite CSS variables ensure the colors will match with the hub site's theme...

topic Re: How do you style the text in a calcite button in Calcite Design System Questions

How do you style the text in a calcite button

Re: How do you style the text in a calcite button