Doggo Storybook 0.9.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>
Default Open in playground 
<.alert id="alert-single-default">
  This is an alert.
</.alert>
Title Open in playground 
<.alert id="alert-single-title" title="This is the title.">
  This is an alert.
</.alert>
Icon Open in playground 
<.alert id="alert-single-icon" title="This is the title.">
  This is an alert.
  <:icon><.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></:icon>
</.alert>
Close button Open in playground 
<.alert id="alert-single-close-button" on_close={JS.hide(to: "#alert-single-close-button")}>
  This is an alert.
</.alert>
Level Open in playground 
<.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>