Notifications

Preview Available in release assets

Render durable server-owned notifications with accessible destinations and mutations.

Server contract

Use .thin-notifications on a stable identified region. Datastar 1.0.2 may request server fragments; the application owns permissions, validation, idempotency, persistence, and reconciliation.

Server-rendered content, real links, native controls, and ordinary submitted forms preserve the complete workflow without Datastar or JavaScript.

Notifications primary example

<section class="thin-notifications" id="notifications" aria-labelledby="notifications-title">
  <h2 id="notifications-title">Notifications</h2>
  <ul>
    <li>
      <a href="/orders/1024">Order 1024 needs review</a>
      <form action="/api/advanced/dashboard?view=notification" method="post">
        <input type="hidden" name="id" value="order-1024">
        <button name="action" value="dismiss" aria-label="Dismiss notification: Order 1024 needs review">Dismiss</button>
      </form>
    </li>
  </ul>
</section>

Show code

<section class="thin-notifications" id="notifications" aria-labelledby="notifications-title">
  <h2 id="notifications-title">Notifications</h2>
  <ul>
    <li>
      <a href="/orders/1024">Order 1024 needs review</a>
      <form action="/api/advanced/dashboard?view=notification" method="post">
        <input type="hidden" name="id" value="order-1024">
        <button name="action" value="dismiss" aria-label="Dismiss notification: Order 1024 needs review">Dismiss</button>
      </form>
    </li>
  </ul>
</section>

Anatomy

Stable server-owned region
Heading and current status
Native links or form controls
Server result and error text

Variants and sizes

Notification list
Empty notifications

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Idle
Pending
Empty
Partial success
Error
Forbidden
Long content
Narrow container
Reconnect

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Links open destinations; dismiss/read forms submit notification IDs and return the complete server-reconciled region.

Accessibility

Use semantic headings, native controls, explicit labels, selected counts, text status/error messages, and predictable focus. Announce completed server changes, not every intermediate client event; preserve source and focus order across patches.

Contract

LIVE

Basis

Native forms, links, file inputs, status regions, and action buttons; async semantics must be chosen per update

Evidence

tests/unit/library/dashboard-recipes.test.ts

API

Use .thin-notifications on a stable identified region. Datastar 1.0.2 may request server fragments; the application owns permissions, validation, idempotency, persistence, and reconciliation.

Behavior tier: datastar-required

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Server-rendered content, real links, native controls, and ordinary submitted forms preserve the complete workflow without Datastar or JavaScript.

Assets and dependencies

/components.css

Dependencies: datastar@1.0.2

Source: packages/ui/src/items/dashboard/style.ts