# Toaster

Toast notification system for displaying temporary messages

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
"use client"

import { toast } from "sonner"

import { Button } from "@databricks/appkit-ui/react"

export default function SonnerExample() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast("Event has been created", {
          description: "Sunday, December 03, 2023 at 9:00 AM",
          action: {
            label: "Undo",
            onClick: () => console.log("Undo"),
          },
        })
      }
    >
      Show Toast
    </Button>
  )
}

```

## Toaster[​](#toaster-1 "Direct link to Toaster")

Toast notification system for displaying temporary messages

**Source:** [`packages/appkit-ui/src/react/ui/sonner.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sonner.tsx)

### Props[​](#props "Direct link to Props")

| Prop                 | Type               | Required | Default | Description |
| -------------------- | ------------------ | -------- | ------- | ----------- |
| `id`                 | `string`           |          | -       | -           |
| `invert`             | `boolean`          |          | -       | -           |
| `theme`              | `enum`             |          | -       | -           |
| `position`           | `enum`             |          | -       | -           |
| `hotkey`             | `string[]`         |          | -       | -           |
| `richColors`         | `boolean`          |          | -       | -           |
| `expand`             | `boolean`          |          | -       | -           |
| `duration`           | `number`           |          | -       | -           |
| `gap`                | `number`           |          | -       | -           |
| `visibleToasts`      | `number`           |          | -       | -           |
| `closeButton`        | `boolean`          |          | -       | -           |
| `toastOptions`       | `ToastOptions`     |          | -       | -           |
| `className`          | `string`           |          | -       | -           |
| `style`              | `CSSProperties`    |          | -       | -           |
| `offset`             | `Offset`           |          | -       | -           |
| `mobileOffset`       | `Offset`           |          | -       | -           |
| `dir`                | `enum`             |          | -       | -           |
| `swipeDirections`    | `SwipeDirection[]` |          | -       | -           |
| `icons`              | `ToastIcons`       |          | -       | -           |
| `containerAriaLabel` | `string`           |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Toaster } from '@databricks/appkit-ui';

<Toaster /* props */ />

```