> For the complete documentation index, see [llms.txt](https://nour-eldin-shobier.gitbook.io/carbon-flutter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nour-eldin-shobier.gitbook.io/carbon-flutter/widgets/notification.md).

# Notification

## Overview

Notifications are messages that communicate information to the user. The two main variants of notifications are toast notifications and inline notifications.

![](/files/-MhSlr69mUJWinE4bEug)

### Widget API

{% tabs %}
{% tab title="CNotification.inline" %}

| Property         | Description                                                                                                                                                                                                                                                                                     |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| title            | <p>The title to display.</p><ul><li><strong>Type:</strong> <code>Widget</code></li><li><strong>Default:</strong> required</li></ul>                                                                                                                                                             |
| subtitle         | <p>The subtitle to display.</p><ul><li><strong>Type:</strong> <code>Widget</code></li><li><strong>Default:</strong> required</li></ul>                                                                                                                                                          |
| hideCloseButton  | <p>Whether the close button should be disabled, or not.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>false</code></li></ul>                                                                                                                      |
| kind             | <p>The state that the notification represents. It can be <code>error</code>, <code>info</code>, <code>success</code>, or <code>warning</code>.</p><ul><li><strong>Type:</strong> <code>CNotificationKind</code></li><li><strong>Default:</strong> <code>CNotificationKind.info</code></li></ul> |
| lowContrast      | <p>Whether you are using the low contrast variant of the notification.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>true</code></li></ul>                                                                                                        |
| onCloseButtonTap | <p>Called when the close button is tapped.</p><ul><li><strong>Type:</strong> <code>VoidCallback?</code></li><li><strong>Default:</strong> optional</li></ul>                                                                                                                                    |
| onClose          | <p>Called after the given <code>timeout</code> duration has passed.</p><ul><li><strong>Type:</strong> <code>VoidCallback?</code></li><li><strong>Default:</strong> optional</li></ul>                                                                                                           |
| actions          | <p>A list of <code>CNotificationActionButton</code> to display in a row when the notification is <code>inline</code>.</p><ul><li><strong>Type:</strong> <code>List\<CNotificationActionButton>?</code></li><li><strong>Default:</strong> optional</li></ul>                                     |
| {% endtab %}     |                                                                                                                                                                                                                                                                                                 |

{% tab title="CNotification.toast" %}

| Property         | Description                                                                                                                                                                                                                                                                                     |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| title            | <p>The title to display.</p><ul><li><strong>Type:</strong> <code>Widget</code></li><li><strong>Default:</strong> required</li></ul>                                                                                                                                                             |
| subtitle         | <p>The subtitle to display.</p><ul><li><strong>Type:</strong> <code>Widget</code></li><li><strong>Default:</strong> required</li></ul>                                                                                                                                                          |
| hideCloseButton  | <p>Whether the close button should be disabled, or not.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>false</code></li></ul>                                                                                                                      |
| lowContrast      | <p>Whether you are using the low contrast variant of the notification.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>true</code></li></ul>                                                                                                        |
| kind             | <p>The state that the notification represents. It can be <code>error</code>, <code>info</code>, <code>success</code>, or <code>warning</code>.</p><ul><li><strong>Type:</strong> <code>CNotificationKind</code></li><li><strong>Default:</strong> <code>CNotificationKind.info</code></li></ul> |
| onCloseButtonTap | <p>Called when the close button is tapped.</p><ul><li><strong>Type:</strong> <code>VoidCallback?</code></li><li><strong>Default:</strong> optional</li></ul>                                                                                                                                    |
| onClose          | <p>Called after the given <code>timeout</code> duration has passed.</p><ul><li><strong>Type:</strong> <code>VoidCallback?</code></li><li><strong>Default:</strong> optional</li></ul>                                                                                                           |
| caption          | <p>An optional caption to display.</p><ul><li><strong>Type:</strong> <code>Widget?</code></li><li><strong>Default:</strong> optional</li></ul>                                                                                                                                                  |
| {% endtab %}     |                                                                                                                                                                                                                                                                                                 |

{% tab title="CNotificationActionButton" %}

| Property      | Description                                                                                                                                                                                                                 |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| child         | <p>The content of the action button.</p><ul><li><strong>Type:</strong> <code>Widget</code></li><li><strong>Default:</strong> required</li></ul>                                                                             |
| onTap         | <p>Called when the action button is tapped.</p><ul><li><strong>Type:</strong> <code>VoidCallback</code></li><li><strong>Default:</strong> required</li></ul>                                                                |
| width         | <p>The width of the action button. If it's null, the action button will size itself to the <code>child</code>.</p><ul><li><strong>Type:</strong> <code>double?</code></li><li><strong>Default:</strong> optional</li></ul>  |
| height        | <p>The height of the action button. If it's null, the action button will size itself to the <code>child</code>.</p><ul><li><strong>Type:</strong> <code>double?</code></li><li><strong>Default:</strong> optional</li></ul> |
| {% endtab %}  |                                                                                                                                                                                                                             |
| {% endtabs %} |                                                                                                                                                                                                                             |

### Example

```dart
CNotification.toast(
  onCloseButtonTap: () {},
  lowContrast: false,
  kind: CNotificationKind.error,
  title: CText(data: 'Notification title'),
  subtitle: CText(data: 'Subtitle text goes here.'),
  caption: CText(data: 'Time stamp [00:00:00]'),
)

// OR

CNotification.inline(
  onCloseButtonTap: () {},
  kind: CNotificationKind.success,
  lowContrast: false,
  title: CText(data: 'Notification title'),
  subtitle: CText(data: 'Subtitle text goes here.'),
  actions: [
    CNotificationActionButton(child: CText(data: 'Action'), onTap: () {}),
  ],
)
```