---
title: "Toast"
description: "A short message about something that just happened, called from anywhere with toast.success, toast.error, toast.info or toast.warning. Render one Toaster in the app."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Toast

## Statuses

Hovering or focusing the toasts pauses their time; one with an action stays until closed.

```tsx
import { Button, Toaster, toast } from '@arbol-ai/ui';

<div className="flex flex-wrap gap-2">
  <Button
    onPress={() => {
      toast.success('Contact saved');
    }}
    variant="outline"
  >
    Success
  </Button>
  <Button
    onPress={() => {
      toast.error('Could not send the campaign', {
        description: 'The WhatsApp number is disconnected.',
      });
    }}
    variant="outline"
  >
    Error
  </Button>
  <Button
    onPress={() => {
      toast.info('Export started', { description: 'We will email you the file.' });
    }}
    variant="outline"
  >
    Info
  </Button>
  <Button
    onPress={() => {
      toast.warning('Contact deleted', {
        action: {
          label: 'Undo',
          onAction: () => {
            toast.success('Contact restored');
          },
        },
      });
    }}
    variant="outline"
  >
    With an action
  </Button>
  <Toaster />
</div>
```

## Source

The examples above are [`src/components/toast/toast.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/toast/toast.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/feedback/toast/index.mdx