Button

The primary action control.

Four variants — primary, secondary, ghost, danger. Square edges, token-driven padding. Supports a `loading` state that renders the shared `Spinner` (aria-busy, stays focusable) and accepts `true` (the configured default variant) or a `SpinnerVariant` string, leading/trailing icon snippets that never change the control height, `iconOnly` and `fullWidth` layouts, a bindable element ref, and forwards any remaining native button attributes.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Button } from 'dssoca';
</script>

<Button variant="primary" onclick={() => {}}>deploy</Button>
<Button variant="secondary">cancel</Button>
<Button variant="danger" loading loadingLabel="deleting…">delete</Button>
<Button variant="primary" loading="pipe" loadingLabel="saving…">save</Button>
<Button variant="ghost">forgot?</Button>

HTML

CSS only — static markup The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css — see Plain HTML & CSS.

html

<button class="ss-btn primary" type="button">
  <span class="label">deploy</span>
</button>

A native <button>; add your own click handler. Use <span data-ss-icon="arrow" class="affix"> for leading/trailing icons (vanilla.js hydrates it).

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'danger'`	`'secondary'`	Visual emphasis.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type.
`disabled`	`boolean`	`false`	Disable the button.
`loading`	`boolean \| SpinnerVariant`	`false`	Loading state, rendered with the shared Spinner: `true` uses the configured default variant, a SpinnerVariant string picks a glyph, `false` is off. Blocks clicks, sets aria-busy; the button stays focusable. (BREAKING since 0.x: was a plain boolean and a bespoke ring spinner.)
`loadingLabel`	`string`	—	Accessible name while loading (keeps the name stable when the label is hidden).
`iconOnly`	`boolean`	`false`	Square icon-only button; `label` is required and becomes the aria-label.
`label`	`string`	—	Accessible name; required for icon-only buttons.
`fullWidth`	`boolean`	`false`	Stretch to fill the inline axis and centre the content.
`leading`	`Snippet`	—	Icon snippet rendered before children.
`trailing`	`Snippet`	—	Icon snippet rendered after children.
`onclick`	`(e: MouseEvent) => void`	—	Click handler (suppressed while loading/disabled).
`el`	`HTMLButtonElement`	—	Bindable reference to the underlying <button>.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.
`children`	`Snippet`	—	Button label.
`...rest`	`HTMLButtonAttributes`	—	Any remaining native button attributes / handlers are forwarded.