# 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**](https://docs.usegravity.app/gravity-native/components/view)**.**

### Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FTYnJ2ICkCCxkFJomDCXn%2Ftoast.png?alt=media&#x26;token=dbccc93f-1333-4d3c-8784-5d91dbf573db" 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).