Notifications

Toast notifications: a region container plus individual notification cards (default + wide variants).

Preview

React preview

LiveView (HEEx)

alias DesignSystem.UI.Notifications

<Notifications.region position="top-right">
  <Notifications.notification id="upload-ok" title="Uploaded" icon="hero-check-circle">
    Your file is now available.
  </Notifications.notification>
</Notifications.region>

React (JSX)

import { Notification, NotificationRegion } from "../ui/index.mjs"

<NotificationRegion position="top-right">
  <Notification id="upload-ok" title="Uploaded">
    Your file is now available.
  </Notification>
</NotificationRegion>