Components

DhAlert

Inline callout for informing the user about a state, result, or required action. Each variant (info / success / warning / error / primary / neutral) uses a single role colour: a 15% tonal fill, a 1px border at 85%, and the role colour as text. Freeform body, leading icon (auto per variant), up to two text actions, closable by default.

Open in Figma

Variants

Colour role only. Each variant uses a single role colour — a 15% tonal fill, a matching 85% border, and role-coloured text.

<DhAlert variant="info"    title="Heads up"   closable={false}>GPS is currently disabled.</DhAlert>
<DhAlert variant="success" title="Saved"      closable={false}>The subject was found in the registry.</DhAlert>
<DhAlert variant="warning" title="Almost full" closable={false}>You are close to your storage limit.</DhAlert>
<DhAlert variant="error"   title="Upload failed" closable={false}>Check your connection and try again.</DhAlert>
<DhAlert variant="primary" title="New feature" closable={false}>Search is now available in the toolbar.</DhAlert>
<DhAlert variant="neutral" title="Note"       closable={false}>This recording is for training purposes.</DhAlert>

Closable

Closable by default. The dismiss button fires onclose; the parent owns visibility.

{#if visible}
  <DhAlert variant="info" title="Dismissible" onclose={() => (visible = false)}>
    Closable by default — a dismiss button fires onclose.
  </DhAlert>
{/if}

With actions

Up to two text actions render below the body and fire their callbacks.

<DhAlert
  variant="error"
  title="Upload failed"
  closable={false}
  actions={[
    { label: 'Retry', onclick: retry },
    { label: 'Dismiss', onclick: dismiss }
  ]}
>
  The file could not be uploaded.
</DhAlert>

Rich body

The body is freeform — pass a heading and any number of paragraphs.

<DhAlert variant="warning" title="Permission required">
  <p>Location access is turned off for this device.</p>
  <p>Enable it in <strong>Settings → Privacy</strong> to attach a position to each recording.</p>
</DhAlert>

Icon override

Each variant ships a default Lucide icon. Override it, or pass null to hide it.

<DhAlert variant="success" icon="badge-check" closable={false}>Custom leading icon.</DhAlert>
<DhAlert variant="info" icon={null} closable={false}>No leading icon.</DhAlert>