Button

What this example shows

SvButton - a production action bar block: variants, sizes, icons, loading and a full-width CTA. Copy-paste ready. SvButton exceeds a bare button with variant / loading / icon / block / href baked in.

Imports, features and API used

Imports: @svgrid/grid

Source code (305-button.svelte)

<script lang="ts">
  /**
   * SvButton - a production action bar block: variants, sizes, icons, loading and
   * a full-width CTA. Copy-paste ready. SvButton exceeds a bare button with
   * variant / loading / icon / block / href baked in.
   */
  import { SvButton } from '@svgrid/grid'

  let saving = $state(false)
  async function save() {
    saving = true
    await new Promise((r) => setTimeout(r, 1200))
    saving = false
  }
</script>

<div class="wrap">
  <header>
    <h2>Button</h2>
    <p>Variants, sizes, icons, loading and links - the primitives for toolbars, forms and CTAs.</p>
  </header>

  <section class="block">
    <h3>Toolbar</h3>
    <div class="bar">
      <SvButton variant="primary" onclick={save} loading={saving}>Save changes</SvButton>
      <SvButton variant="secondary">Preview</SvButton>
      <SvButton variant="outline">Duplicate</SvButton>
      <SvButton variant="ghost">Cancel</SvButton>
      <span class="spacer"></span>
      <SvButton variant="danger">Delete</SvButton>
    </div>
  </section>

  <section class="block">
    <h3>Sizes</h3>
    <div class="bar">
      <SvButton size="sm">Small</SvButton>
      <SvButton size="md">Medium</SvButton>
      <SvButton size="lg">Large</SvButton>
    </div>
  </section>

  <section class="block">
    <h3>With icons</h3>
    <div class="bar">
      <SvButton variant="primary">
        {#snippet icon()}<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14" /></svg>{/snippet}
        New item
      </SvButton>
      <SvButton variant="outline">
        {#snippet icon()}<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" /></svg>{/snippet}
        Export
      </SvButton>
    </div>
  </section>

  <section class="block narrow">
    <h3>Full-width CTA</h3>
    <SvButton variant="primary" block>Continue to checkout</SvButton>
  </section>
</div>

<style>
  .wrap { padding: 20px; max-width: 720px; display: flex; flex-direction: column; gap: 20px; }
  header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
  header p { margin: 0; color: var(--sg-muted, #64748b); font-size: 13.5px; line-height: 1.5; }
  .block h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sg-muted, #64748b); }
  .bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .spacer { flex: 1; }
  .narrow { max-width: 320px; }
</style>

View this example on GitHub

Related documentation

• SvButton

Related articles

• SvGrid UI Components Tips and Tricks: Svelte 5 Buttons, Inputs, Tree, Forms - Practical tips for the SvGrid UI component kit - SvButton states, a Cmd+K command palette, a virtualized searchable tree, schema-driven forms, a parsing date/time field, and the shared field contract - each with a code snippet.
• An Actions Column (Edit, Delete) in SvGrid - Build a per-row actions column with edit, delete, and duplicate buttons in SvGrid - handling data mutations, accessibility, and confirmation flows correctly.

More Buttons & Toggles examples

• Buttons & toggles - The UI kit press/toggle primitives: SvButton (variants/sizes/loading), SvRepeatButton (hold-to-repeat), SvToggleButton, SvSwitchButton, SvCheckBox (+ indeterminate), SvRadioGroup (arrow-key nav) and SvRating (half stars). Theme-driven, standalone or as grid cell controls.
• Button group - SvButtonGroup: a segmented button bar - single-select (radio semantics, a view switcher), multi-select (a toggle set / formatting toolbar) or plain actions. Roving tabindex + arrow keys, and the shared editor contract (label, validation, dir/RTL).
• Repeat button - SvRepeatButton: hold-to-repeat with acceleration - a quantity stepper and a volume control block.
• Toggle button - SvToggleButton: a pressed on/off button (aria-pressed) - a text-formatting toolbar and pin / live state toggles.
• Switch - SvSwitchButton in a real settings panel: labelled rows with descriptions, on/off track labels and a disabled row.