# `PetalComponents.Alert`
[🔗](https://github.com/petalframework/petal_components/blob/v3.2.0/lib/petal_components/alert.ex#L1)

# `alert`

## Attributes

* `color` (`:string`) - Defaults to `"info"`. Must be one of `"info"`, `"success"`, `"warning"`, or `"danger"`.
* `variant` (`:string`) - The variant of the alert. Defaults to `"light"`. Must be one of `"light"`, `"soft"`, `"dark"`, or `"outline"`.
* `with_icon` (`:boolean`) - adds some icon base classes. Defaults to `false`.
* `class` (`:any`) - CSS class for parent div. Defaults to `nil`.
* `heading` (`:string`) - label your heading. Defaults to `nil`.
* `label` (`:string`) - label your alert. Defaults to `nil`.
* `close_button_properties` (`:list`) - a list of properties passed to the close button. Defaults to `nil`.
* `on_dismiss` (`Phoenix.LiveView.JS`) - JS commands to run when the alert is dismissed. Automatically adds a close button with built-in hide behavior. Defaults to `%Phoenix.LiveView.JS{ops: []}`.
* Global attributes are accepted.
## Slots

* `inner_block`

---

*Consult [api-reference.md](api-reference.md) for complete listing*