Toggle button

What this example shows

SvToggleButton - a pressed on/off button. A production text-formatting toolbar and a set of view/pin toggles. Copy-paste ready.

Imports, features and API used

Imports: @svgrid/grid

Source code (307-toggle-button.svelte)

<script lang="ts">
  /**
   * SvToggleButton - a pressed on/off button. A production text-formatting toolbar
   * and a set of view/pin toggles. Copy-paste ready.
   */
  import { SvToggleButton } from '@svgrid/grid'

  let bold = $state(true)
  let italic = $state(false)
  let underline = $state(false)
  let pinned = $state(false)
  let live = $state(true)
</script>

<div class="wrap">
  <header>
    <h2>Toggle button</h2>
    <p>A button that stays pressed (<code>aria-pressed</code>) - formatting toolbars, pin / favorite / mute toggles.</p>
  </header>

  <section class="block">
    <h3>Formatting toolbar</h3>
    <div class="toolbar">
      <SvToggleButton pressed={bold} ariaLabel="Bold" onChange={(v) => (bold = v)}><strong>B</strong></SvToggleButton>
      <SvToggleButton pressed={italic} ariaLabel="Italic" onChange={(v) => (italic = v)}><em>I</em></SvToggleButton>
      <SvToggleButton pressed={underline} ariaLabel="Underline" onChange={(v) => (underline = v)}><u>U</u></SvToggleButton>
    </div>
    <p class="preview" class:b={bold} class:i={italic} class:u={underline}>The quick brown fox</p>
  </section>

  <section class="block">
    <h3>State toggles</h3>
    <div class="toolbar">
      <SvToggleButton pressed={pinned} onChange={(v) => (pinned = v)}>{pinned ? 'Pinned' : 'Pin'}</SvToggleButton>
      <SvToggleButton pressed={live} onChange={(v) => (live = v)}>{live ? 'Live' : 'Paused'}</SvToggleButton>
    </div>
  </section>
</div>

<style>
  .wrap { padding: 20px; max-width: 560px; display: flex; flex-direction: column; gap: 22px; }
  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; }
  code { background: var(--sg-row-hover-bg, #eef2ff); padding: 1px 5px; border-radius: 5px; font-size: 12px; }
  .block h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sg-muted, #64748b); }
  .toolbar { display: inline-flex; gap: 6px; }
  .preview { margin: 14px 0 0; font-size: 18px; }
  .preview.b { font-weight: 800; }
  .preview.i { font-style: italic; }
  .preview.u { text-decoration: underline; }
</style>

View this example on GitHub

Related documentation

• SvToggleButton

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.
• A Density (Row-Height) Toggle for SvGrid - Let users pick compact, comfortable, or spacious rows - wired through CSS tokens, synced with the virtualizer, and persisted across sessions.

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).
• Button - SvButton in production: a toolbar (variants primary/secondary/outline/ghost/danger), sizes, icon slots, a loading state and a full-width CTA. Copy-paste-ready blocks.
• Repeat button - SvRepeatButton: hold-to-repeat with acceleration - a quantity stepper and a volume control block.
• Switch - SvSwitchButton in a real settings panel: labelled rows with descriptions, on/off track labels and a disabled row.