## Notification  
DMC has an excellent Notifications System, which can be used to generate client side notifications.  
Category: Feedback  

### New NotificationContainer

As of DMC v2.0.0, notifications are handled by a single component:  `NotificationContainer`.

This replaces the previous `NotificationProvider`   +  `Notification` approach with one that is more aligned with 
Mantine's implementation.


### Getting Started

Add `NotificationContainer` to your layout:

```python
app.layout = dmc.MantineProvider([
    dmc.NotificationContainer(id="notification-container"),
    # other components...
])
```

* `NotificationContainer` must be placed inside a `MantineProvider`.
* You should have only one `NotificationContainer` in your app; multiple containers will cause notifications to be duplicated.
* In multi-page apps, place `NotificationContainer` in the top-level `app.layout`, not inside individual pages.
* It is no longer necessary to use a separate output container (such as `html.Div`) as in versions prior to 2.0.

### Migration Guide

The following components are deprecated and will be removed in a future release:

* `NotificationProvider`
* `Notification`

See the [Notification Migration Guide](/migration-notifications) for help updating your app.


### Show Notifications

To display a notification, use the `sendNotifications` prop on the `NotificationContainer`.
It accepts a list of dictionaries, where each dict represents a notification.

```python

dmc.NotificationContainer(
    id="notification-container",
    sendNotifications=[{
        "action": "show",
        "id": "my-id",
        "message": "This is a notification",
        # other props like title, color, icon, etc.
    }]
)
```

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


component = html.Div([
    # Place one NotificationContainer in app.layout)
    dmc.Button("Show Notification", id="notification-show")

])

@callback(
    Output("notification-container", "sendNotifications"),
    Input("notification-show", "n_clicks"),
    prevent_initial_call=True,
)
def show(n_clicks):
    if n_clicks is None:
        return no_update
    return [dict(
        title="Hey there!",
        id="show-notify",
        action="show",
        message="Notifications in Dash, Awesome!",
        icon=DashIconify(icon="ic:round-celebration"),
    )]
```
### Update Notifications

To update notifications that were previously shown or queued, set `action="update"` and include the`id` of the notifications to update:

```python
sendNotifications = [{
    "action": "update",
    "id": "my-id",
    "message": "My updated notification message",
    # other props to update
}]
```

```python
import dash_mantine_components as dmc
from dash import Output, Input, html, ctx, callback, no_update
from dash_iconify import DashIconify

component = html.Div(
    [
        dmc.Group(
            [
                dmc.Button(
                    "Load Data",
                    id="show-notifications",
                    n_clicks=0
                ),
                dmc.Button(
                    "Update",
                    id="update-notifications",
                    n_clicks=0
                ),
            ],
        ),
    ],
)


@callback(
    Output("notification-container", "sendNotifications",  allow_duplicate=True,),
    Input("show-notifications", "n_clicks"),
    Input("update-notifications", "n_clicks"),
    prevent_initial_call=True,
)
def notify(n1, n2):
    button_id = ctx.triggered_id
    if n1 and n1 > 0:
        if "show" in button_id:
            return [dict(
                id="my-load-notification",
                title="Process initiated",
                message="The process has started.",
                loading=True,
                color="orange",
                action="show",
                autoClose=False,
            )]
    if n2 and n2 > 0:
        if "update" in button_id:
            return [dict(
                id="my-load-notification",
                title="Data loaded",
                message="Notification closing in 2 seconds",
                color="green",
                loading=False,
                action="update",
                autoClose=2000,
                icon=DashIconify(icon="akar-icons:circle-check"),
            )]
    return no_update
```
### sendNotifications prop

Each dictionary in `sendNotifications` can include:

* `id` – notification ID used to update or remove notifications. A random ID is generated if not provided.
* `action` – one of `"show"`, or `"update"`
  
    * `"show"` – adds a new notification or queues it if the limit is reached
    * `"update"` – updates a notification previously shown or queued
* `message` – required notification body 
* `position` – notification position. If not provided, the default from `NotificationContainer` is used.
* `withBorder` – whether the notification should have a border
* `withCloseButton` – whether the close button is visible
* `autoClose` – timeout in milliseconds to automatically close the notification. Set to `False` to disable.
* `color` -Controls notification line or icon color, key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default.
* `icon` - Notification icon, replaces color line.
* `title` - Notification title, displayed before body.
* `radius` -  Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default
*  `loading`- Replaces colored line or icon with Loader component.
*  `className`, `style`, `loading`


### Notification Position
You can set position per-notification in the `sendNotifications` dictionary. 
```python
sendNotifications = [
  {
    "action": "show",
    "id": "my-id",
    "message": "Positioned top-left",
    "position": "top-left"
  }
]
```

Valid position values:

* `"top-left"`
* `"top-right"`
* `"top-center"`
* `"bottom-left"`
* `"bottom-right"`
* `"bottom-center"`

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

positions = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center']

component =  dmc.RadioGroup(
    children=dmc.Group([dmc.Radio(p, value=p) for p in positions], my=10),
    label="Select Notification position",
    value=None,
    id="notification-position"
)

@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("notification-position", "value"),
    prevent_initial_call=True,
)
def notify(value):
    if value:
        return [dict(
            title=f"Notification {value}",
            autoClose=True,
            action="show",
            message="Hello World",
            color="red",
            position=value,
        )]
    return dash.no_update
```
You can also set a default position in the `NotificationContainer`. 

```python
app.layout = dmc.MantineProvider([
    dmc.NotificationContainer(position="top-right", id="notification-container"),
])
```

### Limit and queue

To limit the number of notifications displayed at once, use the `limit` prop:

```python
dmc.NotificationContainer(limit=5)
```

Notifications beyond the limit are added to the queue and shown when others are dismissed.

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

component = dmc.Button("Show 10 notifications", id="notify-btn", n_clicks=0),


@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("notify-btn", "n_clicks"),
    prevent_initial_call=True
)
def queue_notifications(n):
    if n > 0:
        return [
            {
                "action": "show",
                "title": f"Notification {i + 1}",
                "message": "Most notifications are added to queue",
                "autoClose": 3000,
                "withCloseButton": True,
            }
            for i in range(10)
        ]
    return no_update
```
### Hide Notifications

Use the `hideNotifications` prop to remove notifications by `id` from the state and queue.

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

component = html.Div(
    [
        dmc.NotificationContainer(id="notification-container"),
        dmc.Group(
            [
                dmc.Button(
                    "Show",
                    id="notifications-show",
                    n_clicks=0
                ),
                dmc.Button(
                    "Hide",
                    id="notifications-hide",
                    n_clicks=0
                ),
            ],
        ),
    ],
)


@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Output("notification-container", "hideNotifications"),
    Input("notifications-show", "n_clicks"),
    Input("notifications-hide", "n_clicks"),
    prevent_initial_call=True,
)
def notify(n1, n2):
    button_id = ctx.triggered_id
    if n1 > 0:
        if "show" in button_id:
            return [dict(
                id="show-hide",
                action="show",
                message="Notification Message",
                color="Red",
                autoClose=False,
            )], no_update
    if n2 > 0:
        if "hide" in button_id:
            return no_update, ["show-hide"]
    return no_update
```
### clean and cleanQueue

Use `cleanQueue` to remove all queued notifications, and `clean` to remove all notifications from both state and queue.

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

component = dmc.Group(
    justify="center",
    children=[
        dmc.Button("Show 10 notifications", id="show-btn", n_clicks=0),
        dmc.Button("Clean queue", id="clean-queue-btn", variant="default", n_clicks=0),
        dmc.Button("Clean all", id="clean-all-btn", variant="outline", color="red", n_clicks=0),
    ]
)


@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("show-btn", "n_clicks"),
    prevent_initial_call=True
)
def show_notifications(n):
    return [
        {
            "action": "show",
            "title": f"Notification {i + 1}",
            "message": "Most notifications are added to queue",
            "autoClose": False,
        }
        for i in range(10)
    ]


@callback(
    Output("notification-container", "cleanQueue"),
    Input("clean-queue-btn", "n_clicks"),
    prevent_initial_call=True
)
def clean_queue(n):
    if n > 0:
        return True
    return no_update


@callback(
    Output("notification-container", "clean"),
    Input("clean-all-btn", "n_clicks"),
    prevent_initial_call=True
)
def clean_all(n):
    if n > 0:
        return True
    return no_update
```
### autoClose

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

component = dmc.Group(
    justify="center",
    children=[
        dmc.Button("Closes in 4 seconds", id="default-close-btn", n_clicks=0),
        dmc.Button("Closes in 500ms", id="short-close-btn", n_clicks=0),
        dmc.Button("Never closes automatically", id="no-autoclose-btn", n_clicks=0),
      #  dmc.NotificationsContainer(id="notification-container"),
    ]
)


@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("default-close-btn", "n_clicks"),
    prevent_initial_call=True
)
def short_notification(n):
    if n > 0:
        return [{
            "action": "show",
            "message": "I will close in 4 seconds (the default auto close)",

        }]
    return no_update

@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("short-close-btn", "n_clicks"),
    prevent_initial_call=True
)
def short_notification(n):
    if n > 0:
        return [{
            "action": "show",
            "message": "I will close in 500ms",
            "autoClose": 500,
        }]
    return no_update


@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("no-autoclose-btn", "n_clicks"),
    prevent_initial_call=True
)
def sticky_notification(n):
    if n > 0:
        return [{
            "action": "show",
            "title": "I will never close",
            "message": "unless you click X",
            "color": "blue",
            "autoClose": False,
            "style": {"marginBottom": 20}
        }]
    return no_update
```
### Use in Clientside Callbacks

`NotificationContainer` exposes the underlying Mantine notifications API globally in JavaScript. You can access this
in clientside callbacks using:

```js
dash_mantine_components.appNotifications
```

You can use the the full [Mantine notifications API](https://mantine.dev/x/notifications/):

- Show: `appNotifications.api.show({...})`

- Update: `appNotifications.api.update({...})`

- Hide: `appNotifications.api.hide("id")`

- Clean: `appNotifications.api.clean()`

- Clean queue: `appNotifications.api.cleanQueue()`

- View state: `appNotifications.store`


The example below demonstrates how to:

* Show a notification from a clientside callback
* Display the notification store in a `html.Pre` component
* Clean all notifications on the client

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


component = html.Div([
        dmc.Group([
            dmc.Button("Show Notification", id="api-show"),
            dmc.Button("Clean", id="api-clean", variant="outline", color="red"),
            dmc.Button("View Store", id="fetch-notification-store", variant="default"),
        ]),
        html.Pre(id="notification-store", style={"whiteSpace": "pre-wrap", "padding": "10px"}),

])

clientside_callback(
    """(n) => {
        if (n > 0) {
            dash_mantine_components.appNotifications.api.show({
                title: "Client-side Notification",
                message: "Triggered from clientside callback",
                color: "blue",
                autoClose: false
            });
        }
        return 0;
    }""",
    Output("api-show", "n_clicks"),
    Input("api-show", "n_clicks"),
    prevent_initial_call=True
)

clientside_callback(
    """() => {
        dash_mantine_components.appNotifications.api.clean()
        return null;
    }""",
    Output("api-clean", "n_clicks"),
    Input("api-clean", "n_clicks"),
    prevent_initial_call=True
)

clientside_callback(
    """() => {
        return JSON.stringify(dash_mantine_components.appNotifications.store, null, 2)
    }""",
    Output("notification-store", "children"),
    Input("fetch-notification-store", "n_clicks"),
    prevent_initial_call=True
)
```
### Notifications in Multi Page apps

In multi-page apps, define `NotificationContainer` in `app.layout`—even if notifications are triggered from other pages.

This ensures the container is always mounted and available, preventing errors when navigating between pages while notifications are active.

### CSS Extensions


As of DMC 1.2.0, Notification component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.


### 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.




#### Notification Selectors


| Selector    | Static Selector                     | Description                                            |
| ----------- | ----------------------------------- | ------------------------------------------------------ |
| root        | `.mantine-Notification-root`        | Root element                                           |
| loader      | `.mantine-Notification-loader`      | Loader component, displayed only when `loading` is set |
| icon        | `.mantine-Notification-icon`        | Icon component, displayed only when `icon` is set      |
| body        | `.mantine-Notification-body`        | Notification body, contains all other elements         |
| title       | `.mantine-Notification-title`       | Title element, displayed only when `title` is set      |
| description | `.mantine-Notification-description` | Description displayed below the title                  |
| closeButton | `.mantine-Notification-closeButton` | Close button element                                   |



#### Notification CSS Variables

| Selector | Variable                | Description                                    |
| -------- | ----------------------- | ---------------------------------------------- |
| root     | `--notification-radius` | Controls border-radius                         |
| root     | `--notification-color`  | Controls icon color or notification line color |



#### Notification Data Attributes

| Selector    | Attribute          | Condition                |
| ----------- | ------------------ | ------------------------ |
| root        | `data-with-icon`   | `icon` prop is set       |
| root        | `data-with-border` | `withBorder` prop is set |
| description | `data-with-title`  | `title` prop is set      |




#### Notifications Selectors
| Selector      | Static Selector                         | Description                                      |
|--------------|--------------------------------------|--------------------------------------------------|
| `root`       | `.mantine-Notifications-root`      | Notifications container, contains all notifications |
| `notification` | `.mantine-Notifications-notification` | Single notification |

#### Notifications CSS Variables
| Selector | Variable | Description |
|----------|----------|-------------|
| `root`   | `--notifications-container-width` | Controls notifications container max-width |
| `root`   | `--notifications-z-index` | Controls notifications container z-index |



### Keyword Arguments
#### NotificationContainer

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

- autoClose (number | boolean; optional):
    Auto close timeout for all notifications in ms, `False` to disable
    auto close, can be overwritten for individual notifications in
    `notifications.show` function, `4000` by defualt.

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

- clean (boolean; optional):
    Notifications API: removes all notifications from the
    notifications state and queue.

- cleanQueue (boolean; optional):
    Notifications API: removes all notifications from the queue.

- containerWidth (string | number; optional):
    Notification width, cannot exceed 100%, `440` by default.

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

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

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

- hideNotifications (list of strings; optional):
    Notifications (ids) to be removed  from state or queue.

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

- limit (number; optional):
    Maximum number of notifications displayed at a time, other new
    notifications will be added to queue, `5` by default.

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

- notificationMaxHeight (string | number; optional):
    Notification `max-height`, used for transitions, `200` by default.

- portalProps (dict; optional):
    Props to pass down to the Portal when withinPortal is True.

- position (a value equal to: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'; optional):
    Notifications position, `'bottom-right'` by default.

- sendNotifications (list of dicts; optional):
    Notifications to show or update.

    `sendNotifications` is a list of dicts with keys:

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

- transitionDuration (number; optional):
    Notification transition duration in ms, `250` by default.

- variant (string; optional):
    variant.

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

- withinPortal (boolean; optional):
    Determines whether notifications container should be rendered
    inside `Portal`, `True` by default.

- zIndex (string | number; optional):
    Notifications container z-index, `400` by default.