Sonner

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

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 */ />