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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/components/notification.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.