Button

A clickable button or anchor with built-in loading state, icon slots, and a discriminated prop union that forces consumers to provide an accessible name at compile time.

Usage

<script lang="ts">
  import { Button } from '@lostgradient/cinder';
</script>

<Button variant="primary" size="md" label="Save" />

When href is set, the component renders as <a>; otherwise it renders as <button>. Setting loading swaps in a spinner, blocks the consumer's onclick, forces aria-disabled / aria-busy, and strips href to prevent navigation.

Sizes

md is the default and the size for inline actions: the buttons in a row, a card, a dialog footer, or a toolbar. Use sm or xs where space is tight. Reserve lg for a page-level primary action, such as the one call to action that a page is organized around. A screen with several lg buttons has no primary action.

Disabled

A disabled button looks the same in every variant: a neutral surface (or none, for ghost and ghost-danger), --cinder-text-disabled text, and the shared disabled opacity. It never keeps its tone while disabled, so a disabled danger or ghost-danger button does not read as a faded red button. A primary button also never takes a tone from its container: inside a danger Card it is still the primary button.

Toggle buttons

Pass aria-pressed="true" or "false" to make a button a toggle. A pressed button takes the filled accent face (every variant except primary and danger, which are already filled); see button.a11y.md. This applies to every Button that carries aria-pressed="true", including a consumer's own: for example, kanban-board.svelte sets it on a column's drag handle while that column is lifted, so a lifted column's handle now takes the filled face. No committed Cinder baseline shows a pressed Button at rest besides the new button/*-pressed images, which the baseline refresh confirmed.