> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/notification.md).

# Toast (Notification)

{% hint style="info" %}
Renamed from Notification in Gravity 12.
{% endhint %}

The `Toaster` component provides a notification system using toast messages. It uses a provider to manage and display toast notifications with optional actions and icons.

You can show a notification from anywhere in your application using the [**ViewContext**](/gravity-native/components/view.md)**.**

### Preview

<div align="left"><figure><img src="/files/NNaM8AWfvL2DY4OVNev0" alt="Gravity toast notification" width="563"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { useContext } from 'react';
import { ViewContext, Button } from 'components/lib';

function MyComponent({ ...props }){

  const viewContext = useContext(ViewContext);
  
  return (
    <div>
      <Button 
        text='Show'
        action={ () => {
          viewContext.notification({ 
            title: 'Hello!', 
            description: 'I am a notification.' 
          });
        }}
      }/>
    </div>
  );
}
```

## Parameters

| Param       | Description       | Required | Value                       |
| ----------- | ----------------- | -------- | --------------------------- |
| description | toast description | optional | string                      |
| title       | toast title       | optional | string                      |
| variant     | variant           | optional | string (success/info/error) |

### Notes

* The `Toaster` component uses the `useToast` hook to manage the state of the toasts.
* The component relies on `Toast`, `ToastClose`, `ToastDescription`, `ToastProvider`, `ToastTitle`, and `ToastViewport` from `./toast.jsx`.
* For more details, refer to the [Shadcn Toast documentation](https://ui.shadcn.com/docs/components/toast).