GrButton

disabled sets the native attribute (on a <button>) and dims the button with the --gr-button-disabled-bg / -fg / -brd tokens. There is no transparency here on purpose: opacity dilutes colours tuned to AA, and a button stands on a coloured background more often than other components, where diluted text is the first to fail.

Those tokens are themselves references to the shared roles --gr-disabled-bg/-fg/-brd, the same ones a tab, a segment and a slider use: the disabled state looks the same across the whole package and is recoloured from one place. The per-component trio remains a point of customisation for the case where a button has to differ.

The dimming works for a button-link too (href/as): the native disabled does not reach it, so the colours are set with classes rather than with the disabled: variant.

A button that has to stay in the tab order but is declared unavailable is marked with the aria-disabled="true" attribute. It gets the same dimmed look, the native disabled is not set, and the component does not intercept the click — the consumer suppresses it. This is how GrTransfer keeps a move that has nowhere to go: dropping focus from the pressed button into the document body would be worse.

loading does not set the native disabled — the element would be left without focus, and the screen reader would lose the context. Instead there are aria-busy, aria-disabled and click interception in the capture phase. The button looks ordinary while that happens: the state is told by the spinner.

<GrButton :loading="saving" loading-text="Saving the report">
Save
</GrButton>

aria-busy on its own is not announced by every AT, so during loading a hidden suffix is added to the name of the button — loadingText or the gr.button.loading key.

<GrButton>
  <template #prefix><GrIcon><IconPlus /></GrIcon></template>
  Add
  <template #suffix><GrKbd keys="mod+N" /></template>
</GrButton>

The icon and the text used to fall into one slot, and the order was held by the discipline of the consumer. During loading the spinner takes the place of the prefix and #prefix is not rendered: two icons side by side read as a layout defect.

square gives a button with equal sides — the size comes from --gr-button-square-size with a default per size (1.75rem / 2rem / 2.5rem / 2.75rem). The variable can be set in your own CSS to fit the button to your grid:

.toolbar { --gr-button-square-size: 2.25rem; }

The variable is one for all four steps. Set higher up the tree — on :root, in a theme — it collapses xs, sm, md and lg into a single number, and the step stops meaning anything. Its place is therefore a narrow scope like the example above, not the root of the document. If you need a size that depends on the input device, set it through GrConfigProvider rather than through the variable: the application knows about its pointer, the package does not.

block stretches the button to the width of the container.

as → <a href> → <button>. A link automatically gets rel="noopener noreferrer" if it opens in a new tab (external or an explicit target="_blank"), and disabled removes it from the tab order.