- 1.5.0

Alert

The alert component serves as a notification mechanism to provide feedback to the user.

Read more Read less

For supplementary information that doesn't require the user's immediate attention, use callout/1 instead.

Usage

Minimal example:

<.alert id="some-alert"></.alert>

With title, icon and level:

<.alert id="some-alert" level={:info} title="Info">
  message
  <:icon><Heroicon.light_bulb /></:icon>
</.alert>

Dismissable, with an icon in the close button:

<.alert id="some-alert" on_close={JS.push("dismiss")} close_label="Dismiss">
  message
  <:close><Heroicon.x_mark /></:close>
</.alert>

With an action:

<.alert id="some-alert" title="Session expired">
  Your session has expired. Sign in again to continue.
  <:action>
    <.button phx-click="sign-in">Sign in</.button>
  </:action>
</.alert>

The close_label is the button's accessible name, so it is needed whether or not the :close slot is filled.

Default
Open in playground 
<div style="inline-size: 100%">
  <.alert id="alert-single-default">
    This is an alert.
  </.alert>
</div>
Title
Open in playground 
<div style="inline-size: 100%">
  <.alert id="alert-single-title" title="This is the title.">
    This is an alert.
  </.alert>
</div>
Icon
Open in playground 
<div style="inline-size: 100%">
  <.alert id="alert-single-icon" title="This is the title.">
    This is an alert.
    <:icon><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-info"
    >
      <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/>
      <path d="M12 8h.01"/>
    </svg>
    </:icon>
  </.alert>
</div>
Close button
Open in playground 
<div style="inline-size: 100%">
  <.alert
    id="alert-single-close-button"
    on_close={JS.hide(to: "#alert-single-close-button")}
  >
    This is an alert.
  </.alert>
</div>
Close button with icon
Open in playground 
<div style="inline-size: 100%">
  <.alert
    id="alert-single-close-button-with-icon"
    on_close={JS.hide(to: "#alert-single-close-button-with-icon")}
    close_label="Dismiss"
  >
    This is an alert.
    <:close><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-x"
    >
      <path d="M18 6 6 18" />
      <path d="m6 6 12 12" />
    </svg>
    </:close>
  </.alert>
</div>
Action
Open in playground 
<div style="inline-size: 100%">
  <.alert id="alert-single-action" title="Session expired">
    Your session has expired. Sign in again to continue.
    <:action><button>Sign in</button></:action>
  </.alert>
</div>
Level
Open in playground 
<div style="display: grid; gap: 0.75rem; inline-size: 100%">
  <.alert id="alert-level-dog-mod-var-level-info" level="info">
    This is an alert with level: info.
  </.alert>
  <.alert id="alert-level-dog-mod-var-level-success" level="success">
    This is an alert with level: success.
  </.alert>
  <.alert id="alert-level-dog-mod-var-level-warning" level="warning">
    This is an alert with level: warning.
  </.alert>
  <.alert id="alert-level-dog-mod-var-level-danger" level="danger">
    This is an alert with level: danger.
  </.alert>
</div>