Feedback & display: badge, avatar, skeleton, card

About this example

The display layer of the SvGrid UI kit in Svelte 5: SvBadge status pills, SvAvatar with an image, an initials fallback coloured by a hash of the name and a presence dot, SvSkeleton shimmer loaders in text, circle and block variants, and SvCard as a surface with a hoverable state. All are token-driven for light, dark and presets and reduced-motion aware; a Loading toggle swaps the real content for skeletons.

SvBadge, SvAvatar, SvSkeleton and SvCard - status, identity, loading and surface. All theme-token driven (light/dark + presets) and reduced-motion aware. Toggle "Loading" to swap real content for skeletons.

Imports, features and API used

Imports: @svgrid/grid

Frequently asked questions

What does the avatar show without an image?

The initials of name on a background colour derived from a hash of the name, so the same person always gets the same colour; status adds an online, away or offline dot.

How do I use skeletons while loading?

Render SvSkeleton with the width, height and variant of the content it stands in for, circle for an avatar and lines for text, and swap in the real content when the data arrives, as the toggle does.

What variants does SvBadge have?

neutral, accent, success, warning, danger and info, with a pill option and an optional dot for a status list.

Related documentation

• Feedback & display
• SvAvatar
• SvBadge
• SvCard
• SvSkeleton

Related articles

• Copy a Cell Range to the Clipboard in SvGrid - How SvGrid copies selected cell ranges as tab-separated values that paste cleanly into Excel and Google Sheets, plus headers, programmatic copy, and format control.
• Avatar and Image Cells in SvGrid - How to render avatars, product thumbnails, and logos in grid cells with proper fallbacks, lazy loading, and accessible alt text using Svelte 5 snippets.
• Displaying Tree Data and Hierarchies in SvGrid - Render parent-child hierarchies - org charts, file trees, category taxonomies - in SvGrid with expandable rows, size rollups, and lazy child loading.

Source code (333-app-feedback.svelte)

<script lang="ts">
  /**
   * SvBadge, SvAvatar, SvSkeleton and SvCard - status, identity, loading and
   * surface. All theme-token driven (light/dark + presets) and reduced-motion
   * aware. Toggle "Loading" to swap real content for skeletons.
   */
  import { SvBadge, SvAvatar, SvSkeleton, SvCard, SvButton } from '@svgrid/grid'

  let loading = $state(false)

  const people = [
    { name: 'Ada Lovelace', role: 'Engineering', status: 'online' as const },
    { name: 'Alan Turing', role: 'Research', status: 'busy' as const },
    { name: 'Grace Hopper', role: 'Compilers', status: 'away' as const },
  ]
</script>

<div class="wrap">
  <header>
    <h2>Feedback &amp; display</h2>
    <p>Badges, avatars, skeleton loaders and cards - the display layer for dashboards and detail panels.</p>
  </header>

  <section>
    <h3>Badges</h3>
    <div class="row">
      <SvBadge variant="neutral">Draft</SvBadge>
      <SvBadge variant="accent">New</SvBadge>
      <SvBadge variant="success" dot>Active</SvBadge>
      <SvBadge variant="warning">Pending</SvBadge>
      <SvBadge variant="danger" dot>Failed</SvBadge>
      <SvBadge variant="info" pill={false}>v1.2</SvBadge>
    </div>
  </section>

  <section>
    <h3>Avatars</h3>
    <div class="row">
      <SvAvatar name="Ada Lovelace" status="online" />
      <SvAvatar name="Grace Hopper" size="lg" status="away" />
      <SvAvatar name="Alan Turing" shape="square" />
      <SvAvatar size="sm" />
    </div>
  </section>

  <section>
    <div class="head-row">
      <h3>Cards &amp; skeletons</h3>
      <SvButton size="sm" variant="ghost" onclick={() => (loading = !loading)}>{loading ? 'Show content' : 'Show loading'}</SvButton>
    </div>
    <div class="grid">
      {#each people as p (p.name)}
        <SvCard hoverable>
          {#if loading}
            <div class="person"><SvSkeleton variant="circle" width="40px" height="40px" /><SvSkeleton variant="text" lines={2} /></div>
          {:else}
            <div class="person">
              <SvAvatar name={p.name} status={p.status} />
              <div>
                <div class="name">{p.name}</div>
                <div class="role">{p.role}</div>
              </div>
            </div>
          {/if}
          {#snippet footer()}<SvBadge variant="success" dot>{p.status}</SvBadge>{/snippet}
        </SvCard>
      {/each}
    </div>
  </section>
</div>

<style>
  .wrap { padding: 20px; max-width: 860px; 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; }
  section h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sg-muted, #64748b); }
  section > h3 { margin-bottom: 10px; }
  .head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .person { display: flex; align-items: center; gap: 12px; }
  .name { font-size: 13.5px; font-weight: 650; }
  .role { font-size: 12px; color: var(--sg-muted, #64748b); }
</style>

View this example on GitHub

More Range & Feedback examples

• Range & feedback - SvSlider (single or dual-thumb range, ticks, keyboard, vertical) and SvGauge (radial arc with threshold bands, needle, half sweep). Theme-driven value controls, standalone or in-grid.
• Slider - SvSlider: a filter block - a dual-thumb price range plus single sliders for rating and distance, with ticks and live formatted readouts.
• Gauge - SvGauge: a KPI dashboard - radial gauges with colored threshold bands, a live-updating needle, and a needle-less storage tile.
• Progress (linear + circular) - SvProgress and SvCircularProgress: determinate + indeterminate progress with color intents, sizes, labels, striped fill, a buffered track, and a custom ring center. WAI-ARIA progressbar, reduced-motion aware.
• Status & display: alert, stat, timeline, chip, divider, empty - SvAlert (inline info/success/warning/danger messages with actions), SvStat (KPI cards with auto-coloured up/down deltas, invertible), SvTimeline (activity feed), SvChip (removable/clickable pills with avatars), SvDivider (labeled + vertical) and SvEmptyState. The status + display layer for dashboards and detail screens.