Display

StatusRow

Compact card summarising an in-progress operation. Multiple slots for leading icon, body text, progress bar, and metadata.

Examples

With progress + meta

<StatusRow title="Importing" onClick={() => alert('open dialog')}>
  {#snippet leading()}<Spinner size="sm" />{/snippet}
  1,204 of 1,500 · 80%
  {#snippet bar()}<ProgressBar value={0.8} size="sm" />{/snippet}
  {#snippet meta()}Hydrating 47 in queue{/snippet}
</StatusRow>

Props

Prop	Type	Default	Description
`title`	`string`	`—`	Operation name (e.g. "Importing").
`leading`	`Snippet`	`—`	Left-side slot — typically a Spinner or Lamp.
`aside`	`Snippet`	`—`	Right-side accent slot.
`bar`	`Snippet`	`—`	Optional ProgressBar slotted between body and meta.
`meta`	`Snippet`	`—`	Optional secondary line below the body.
`onClick`	`() => void`	`—`	When set, renders as <button>; otherwise a <div>.

Install

CLI

npx @a3tai/mittsu add status-row