Components Alerts

Alerts

Alerts are elements that provide a subtle way to bring important information to the users attention.
Default
This is an info alert
This is a success alert
This is a warning alert
This is a danger alert that is very long
          <.alert color="info">
  This is an info alert
</.alert>
<.alert color="success" label="This is a success alert" />
<.alert color="warning" label="This is a warning alert" />
<.alert color="danger" label="This is a danger alert that is very long" />

        
With icon
This is an info alert
This is a success alert
This is a warning alert
This is a danger alert that is very long
          <.alert with_icon color="info" label="This is an info alert" />
<.alert with_icon color="success" label="This is a success alert" />
<.alert with_icon color="warning" label="This is a warning alert" />
<.alert with_icon
  color="danger">
  This is a danger alert that is very long
</.alert>

        
Dismissable
This is an info alert
This is a success alert
This is a warning alert
This is a danger alert that is very long
          <.alert
  with_icon
  close_button_properties={["phx-click": "do_something"]}
  color="info"
  label="This is an info alert"
/>
<.alert
  with_icon
  close_button_properties={["phx-click": "do_something"]}
  color="success"
  label="This is a success alert"
/>
<.alert
  with_icon
  close_button_properties={["phx-click": "do_something"]}
  color="warning"
  label="This is a warning alert"
/>
<.alert with_icon close_button_properties={["phx-click": "do_something"]} color="danger">
  This is a danger alert that is very long
</.alert>

        
With optional heading
Optional heading that is too long
This is quite a long paragraph that takes up more than one line.
Optional heading that is too long
This is quite a long paragraph that takes up more than one line.
Optional heading that is too long
This is quite a long paragraph that takes up more than one line.
          <div class="flex items-start max-w-sm">
  <.alert
    heading="Optional heading that is too long">
    This is quite a long paragraph that takes up more than one line.
  </.alert>
</div>
<div class="flex items-start max-w-sm">
  <.alert
    with_icon
    heading="Optional heading that is too long">
    This is quite a long paragraph that takes up more than one line.
  </.alert>
</div>
<div class="flex items-start max-w-sm">
  <.alert with_icon close_button_properties={["phx-click": "do_something"]} heading="Optional heading that is too long">
    This is quite a long paragraph that takes up more than one line.
  </.alert>
</div>

        
Properties
          attr(:color, :string,
  default: "info",
  values: ["info", "success", "warning", "danger"]
)

attr(:with_icon, :boolean, default: false, doc: "adds some icon base classes")
attr(:class, :string, default: "", doc: "CSS class for parent div")
attr(:heading, :string, default: nil, doc: "label your heading")
attr(:label, :string, default: nil, doc: "label your alert")
attr(:rest, :global)

attr(:close_button_properties, :list,
  default: nil,
  doc: ~s|a list of properties passed to the close button, eg: close_button_properties={["phx-click": "do_something"]}|
)

slot(:inner_block)