<.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" />

        

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

        

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

        

          <div class="flex items-start max-w-sm">
  <.alert
    variant="outline"
    color="success"
    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
    variant="outline"
    color="warning"
    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>

        

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

attr(:variant, :string,
  default: "light",
  values: ["light", "soft", "dark", "outline"],
  doc: "The variant of the alert"
)

attr(:with_icon, :boolean, default: false, doc: "adds some icon base classes")
attr(:class, :any, default: nil, 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: "a list of properties passed to the close button"
)

slot(:inner_block)