Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Toaster

Toast notification system for displaying temporary messages

## Example​

    "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​

Toast notification system for displaying temporary messages

Source: `packages/appkit-ui/src/react/ui/sonner.tsx`

### 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​

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

    <Toaster /* props */ />