PhiaUi.Components.NotificationCard (phia_ui v0.1.17)

Notification/alert card with type-based color coding and dismiss support.

Displays a title, optional message body, timestamp, and an icon that automatically matches the type. Optionally shows a dismiss button that fires a LiveView event when clicked. The card can be visually dimmed to indicate "already read" state.

Severity types

`:type`	Left border colour	Default icon
`:info`	`border-l-blue-500`	`information-circle`
`:success`	`border-l-emerald-500`	`check-circle`
`:warning`	`border-l-amber-500`	`exclamation-triangle`
`:error`	`border-l-red-500`	`x-circle`

Dismiss support

Set dismissible={true} and provide on_dismiss with a LiveView event name. An × button renders at the top-right; clicking it fires the event with phx-click. Handle the event in your LiveView to remove the notification from state.

Read state

Set read={true} to apply opacity-60 — useful for marking a notification as acknowledged without removing it from the list.

Custom icon slot

Override the default type icon by providing the :icon slot:

<.notification_card title="Build succeeded" type={:success}>
  <:icon><.icon name="rocket" class="text-emerald-500" /></:icon>
</.notification_card>

Examples

<%!-- Info notification --%>
<.notification_card
  title="New message from Alice"
  message="Hey, are you free for a call?"
  timestamp="2 min ago"
  type={:info}
/>

<%!-- Error with dismiss --%>
<.notification_card
  title="Payment failed"
  message="Your card was declined. Please update your billing information."
  type={:error}
  dismissible={true}
  on_dismiss="dismiss_notification"
  read={false}
/>

<%!-- Notification list from state --%>
<div class="space-y-2">
  <.notification_card
    :for={notif <- @notifications}
    title={notif.title}
    message={notif.body}
    timestamp={notif.relative_time}
    type={notif.type}
    read={notif.read}
    dismissible={true}
    on_dismiss="dismiss_notif"
  />
</div>

Summary

Functions

notification_card(assigns)

Renders a notification card with a colored left border and type icon.

Functions

notification_card(assigns)

Renders a notification card with a colored left border and type icon.

The card has three optional regions:

Icon area — type-specific icon on the left (or custom :icon slot).
Content area — title, optional body message, optional timestamp.
Actions slot — buttons rendered below the message.

A dismiss button (×) appears at the top-right when dismissible={true}. The on_dismiss event name drives a phx-click attribute on that button.

Examples

<%!-- Success notification --%>
<.notification_card
  title="Profile updated"
  message="Your changes have been saved."
  type={:success}
  timestamp="just now"
/>

<%!-- Dismissible error --%>
<.notification_card
  title="Upload failed"
  message="File exceeds the 10 MB limit."
  type={:error}
  dismissible={true}
  on_dismiss="clear_error"
/>

Attributes

title (:string) (required) - Notification title.
message (:string) - Notification body text. Defaults to nil.
timestamp (:string) - Timestamp label (e.g. '2 min ago'). Defaults to nil.
type (:atom) - Severity type — controls border color and icon. Defaults to :info. Must be one of :info, :success, :warning, or :error.
dismissible (:boolean) - Show dismiss (X) button. Defaults to false.
on_dismiss (:string) - phx-click event for dismiss button. Defaults to nil.
read (:boolean) - Dim the card when already read. Defaults to false.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the outer div.

Slots

icon - Custom icon override (replaces default type icon).
actions - Action buttons rendered at the bottom.