Layout & feedback primitives

The structural + status kit: SvStack / SvGroup / SvSimpleGrid layout primitives, SvCollapsible show/hide sections, SvSpinner + SvLoadingOverlay for async states, and SvResult for a full outcome page. All themed from the --sg-* tokens.

A live, editable Svelte 5 component example from the SvGrid gallery (Layout). Read the SvGrid UI component docs for the full API.

About this example

The structural and status primitives of SvGrid UI in Svelte 5: SvStack, SvGroup and SvSimpleGrid for layout with gap, alignment and a minChildWidth responsive grid, SvCollapsible for show and hide sections, SvSpinner and SvLoadingOverlay for async states, and SvResult for a full outcome page such as a completed payment. All themed from the --sg-* tokens.

Layout + feedback primitives - SvStack / SvGroup / SvSimpleGrid for structure, SvCollapsible for show/hide sections, SvSpinner + SvLoadingOverlay for async states, and SvResult for a full outcome page. All themed from the --sg-* tokens.

Imports, features and API used

Imports: @svgrid/grid

Frequently asked questions

How does SvSimpleGrid decide the column count?

From minChildWidth: it fits as many columns of at least that width as the container allows and wraps the rest, so the KPI cards go from four across to one on a phone without media queries.

How do I overlay a loading state on a section?

Wrap the section and render SvLoadingOverlay with visible bound to your loading flag and a label; it dims the content, blocks interaction and announces the label.

What is SvResult for?

Whole-page outcomes: success, error, warning, info or notfound, with a status icon, title, description and action buttons, where an inline alert would be too small.

Related documentation

Related articles

Source code (409-layout-feedback.svelte)

<script lang="ts">
  /**
   * Layout + feedback primitives - SvStack / SvGroup / SvSimpleGrid for structure,
   * SvCollapsible for show/hide sections, SvSpinner + SvLoadingOverlay for async
   * states, and SvResult for a full outcome page. All themed from the --sg-* tokens.
   */
  import {
    SvStack, SvGroup, SvSimpleGrid, SvCollapsible, SvSpinner, SvLoadingOverlay, SvResult,
    SvCard, SvStat, SvButton, SvBadge,
  } from '@svgrid/grid'

  let loading = $state(false)
  let advanced = $state(false)
  let done = $state(false)
  function run() {
    loading = true
    setTimeout(() => { loading = false; done = true }, 1200)
  }
</script>

<div class="page">
<SvStack gap={22}>
  <section>
    <h3>Layout primitives</h3>
    <SvSimpleGrid minChildWidth={150} gap={12}>
      <SvCard><SvStat label="Revenue" value="$84k" delta="+12%" trend="up" /></SvCard>
      <SvCard><SvStat label="Orders" value="1,204" delta="+3%" trend="up" /></SvCard>
      <SvCard><SvStat label="Refunds" value="18" delta="-2%" trend="down" invert /></SvCard>
    </SvSimpleGrid>
  </section>

  <section>
    <h3>Group (toolbar row)</h3>
    <SvGroup gap={8} justify="between">
      <SvGroup gap={6}><SvBadge variant="accent">Live</SvBadge><span class="muted">3 running</span></SvGroup>
      <SvGroup gap={6}><SvButton size="sm" variant="ghost">Filter</SvButton><SvButton size="sm" variant="outline">Export</SvButton></SvGroup>
    </SvGroup>
  </section>

  <section>
    <h3>Collapsible</h3>
    <SvStack gap={8}>
      <SvCollapsible title="Shipping details" open>
        <p class="muted">Standard delivery, 3-5 business days. Tracking sent on dispatch.</p>
      </SvCollapsible>
      <SvCollapsible title="Advanced options" bind:open={advanced}>
        <SvStack gap={6}>
          <label class="chk"><input type="checkbox" /> Signature on delivery</label>
          <label class="chk"><input type="checkbox" /> Insure the package</label>
        </SvStack>
      </SvCollapsible>
    </SvStack>
  </section>

  <section>
    <h3>Loading states</h3>
    <SvGroup gap={16} align="center">
      <SvGroup gap={8}><SvSpinner size="sm" /><SvSpinner /><SvSpinner size="lg" /></SvGroup>
      <SvButton variant="primary" onclick={run} disabled={loading}>Run task</SvButton>
    </SvGroup>
    <div class="panel">
      <SvLoadingOverlay visible={loading} label="Processing…" />
      <SvStat label="Batch" value={done ? 'Complete' : 'Idle'} hint={done ? 'Finished at 12:04' : 'Press Run task'} />
    </div>
  </section>

  <section>
    <h3>Result page</h3>
    <div class="result-box">
      <SvResult status="success" title="Payment complete" description="Your receipt is on its way to [email protected].">
        {#snippet actions()}
          <SvButton variant="primary">Back to dashboard</SvButton>
          <SvButton variant="ghost">View receipt</SvButton>
        {/snippet}
      </SvResult>
    </div>
  </section>
</SvStack>
</div>

<style>
  .page { padding: 22px; max-width: 640px; }
  section h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
  .muted { color: var(--sg-muted, #64748b); font-size: 13px; }
  .chk { display: flex; align-items: center; gap: 8px; font-size: 13px; }
  .panel { position: relative; margin-top: 12px; padding: 16px; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px; overflow: hidden; }
  .result-box { border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; }
</style>

View this example on GitHub

More Layout examples

  • Account & security settings console - A real SaaS settings surface composed from the UI kit: SvMenubar app bar, promise + Undo-action toasts on save, SvPopconfirm on destructive rows, SvHoverCard teammate previews, and frame input adornments (leading icons, prefix affixes, masked API key). Profile / Team / Security tabs over SvCard + SvStat.
  • Invoice builder - An adornment-heavy money form: currency prefixes, % suffixes, masked tax IDs (frame adornments), line items with SvPopconfirm delete + Undo action toasts, live SvStat totals, an SvHoverCard tax hint, and a promise toast on Send. Pure UI-kit composition.
  • Operations KPI dashboard - A KPI console: SvStat + SvSparkline tiles, an SvGauge SLA dial, SvHoverCard drill-down previews per service, an SvMenubar toolbar (View / Range / Actions) and a promise toast on Refresh. Pure UI-kit composition, no grid dependency.
  • Form: rich field types - SvForm reaching the whole input suite from one schema - phone, country, mask, combobox, radio, slider, tags, datetime and file - plus per-field help text, a readonly field, column span, and a promise toast on submit.
  • Form: cascading fields - SvForm dependent selects - a child list derives from the parent value via a function `options`, and `dependsOn` clears the child when the parent changes so a stale selection never lingers. Country -> State -> City.