## Alert  
Use Alerts to attract user attention with static messages.  
Category: Feedback  

### Introduction

### Simple Example

Create an alert with the main message (`children`), the `title`, and the `color`.

```python
import dash_mantine_components as dmc

component = dmc.Alert(
    "Something happened! You made a mistake and there is no going back, your data was lost forever!",
    title="Simple Alert!",
)
```
### Colors

```python
import dash_mantine_components as dmc

message = "Something happened! You made a mistake and there is no going back!"

component = dmc.Stack(
    children=[
        dmc.Alert(message, title="Primary", color="blue"),
        dmc.Alert(message, title="Secondary", color="gray"),
        dmc.Alert(message, title="Success!", color="green"),
        dmc.Alert(message, title="Warning!", color="yellow"),
        dmc.Alert(message, title="Danger!", color="red"),
        dmc.Alert(message, title="Info", color="violet"),
    ],
)
```
### Dismissible Alerts

The alerts can be closed either programmatically by toggling the `hide` property or by clicking on the close button on the alert if enabled with `withCloseButton=True`.

```python
import dash_mantine_components as dmc
from dash import html, Output, Input, State, callback

component = html.Div(
    [
        dmc.Alert(
            "Something terrible happened! You made a mistake and there is no going back, your data was lost forever! ",
            title="Bummer!",
            id="alert-dismiss",
            color="red",
            withCloseButton=True,
        ),
        dmc.Button("Toggle alert", id="alert-button", mt=20),
    ]
)


@callback(
    Output("alert-dismiss", "hide"),
    Input("alert-button", "n_clicks"),
    State("alert-dismiss", "hide"),
    prevent_initial_call=True,
)
def alert(n_clicks, hide):
    return not hide
```
### Automatic Dismissal

The alerts can also be timed out using the `duration` prop which accepts time in milliseconds.

```python
import dash_mantine_components as dmc
from dash import html, Output, Input, callback

component = html.Div(
    [
        dmc.Alert(
            "This alert will dismiss itself after 3 seconds! ",
            title="Auto Dismissing Alert!",
            id="alert-auto",
            color="violet",
            duration=3000,
        ),
        dmc.Button("Show alert", id="alert-auto-button", mt=20),
    ]
)


@callback(
    Output("alert-auto", "hide"),
    Input("alert-auto-button", "n_clicks"),
    prevent_initial_call=True,
)
def alert_auto(n_clicks):
    return False
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name        | Static selector            | Description                                   |
|:------------|:---------------------------|:----------------------------------------------|
| root        | .mantine-Alert-root        | Root element                                  |
| wrapper     | .mantine-Alert-wrapper     | Wraps body and icon                           |
| body        | .mantine-Alert-body        | Body element, wraps title and message         |
| title       | .mantine-Alert-title       | Title element, contains label and icon        |
| label       | .mantine-Alert-label       | Title label                                   |
| message     | .mantine-Alert-message     | Alert message, defined by children            |
| icon        | .mantine-Alert-icon        | Icon wrapper                                  |
| closeButton | .mantine-Alert-closeButton | Close button, defined by withCloseButton prop |


### Keyword Arguments
#### Alert

- children (a list of or a singular dash component, string or number; optional)

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoContrast (boolean; optional):
    Determines whether text color with filled variant should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- closeButtonLabel (string; optional):
    Close button `aria-label`.

- color (optional):
    Key of `theme.colors` or any valid CSS color, default value is
    `theme.primaryColor`.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- duration (number; optional):
    Duration in milliseconds after which the Alert dismisses itself.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- hide (boolean; default False):
    Whether to hide the alert.

- icon (a list of or a singular dash component, string or number; optional):
    Icon displayed next to the title.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set border-radius,
    `theme.defaultRadius` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- title (a list of or a singular dash component, string or number; optional):
    Alert title.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withCloseButton (boolean; optional):
    Determines whether close button should be displayed, `False` by
    default.