Toast | Park UI

Installation

npx @park-ui/cli@next add toast

Add Component

Copy the code snippet below into you components folder.

'use client'
import { Portal } from '@ark-ui/react/portal'
import { Toaster as ArkToaster, createToaster, Toast, useToastContext } from '@ark-ui/react/toast'
import { CheckCircleIcon, CircleAlertIcon, CircleXIcon } from 'lucide-react'
import { forwardRef } from 'react'
import { createStyleContext, Stack, styled } from 'styled-system/jsx'
import { toast } from 'styled-system/recipes'
import { CloseButton } from './close-button'
import { Icon, type IconProps } from './icon'
import { Spinner } from './spinner'

const { withProvider, withContext } = createStyleContext(toast)

const Root = withProvider(Toast.Root, 'root')
const Title = withContext(Toast.Title, 'title')
const Description = withContext(Toast.Description, 'description')
const ActionTrigger = withContext(Toast.ActionTrigger, 'actionTrigger')
const CloseTrigger = withContext(Toast.CloseTrigger, 'closeTrigger')
const StyledToaster = styled(ArkToaster)

const iconMap: Record<string, React.ElementType> = {
  warning: CircleAlertIcon,
  success: CheckCircleIcon,
  error: CircleXIcon,
}

const Indicator = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
  const toast = useToastContext()

  const StatusIcon = iconMap[toast.type]
  if (!StatusIcon) return null

  return (
    <Icon ref={ref} data-type={toast.type} {...props}>
      <StatusIcon />
    </Icon>
  )
})

export const toaster = createToaster({
  placement: 'bottom-end',
  pauseOnPageIdle: true,
  overlap: true,
  max: 5,
})

export const Toaster = () => {
  return (
    <Portal>
      <StyledToaster toaster={toaster} insetInline={{ mdDown: '4' }}>
        {(toast) => (
          <Root>
            {toast.type === 'loading' ? <Spinner color="colorPalette.plain.fg" /> : <Indicator />}

            <Stack gap="3" alignItems="start">
              <Stack gap="1">
                {toast.title && <Title>{toast.title}</Title>}
                {toast.description && <Description>{toast.description}</Description>}
              </Stack>
              {toast.action && <ActionTrigger>{toast.action.label}</ActionTrigger>}
            </Stack>
            {toast.closable && (
              <CloseTrigger asChild>
                <CloseButton size="sm" />
              </CloseTrigger>
            )}
          </Root>
        )}
      </StyledToaster>
    </Portal>
  )
}

Integrate Recipe

Integrate this recipe in to your Panda config.

import { toastAnatomy } from '@ark-ui/react/toast'
import { defineSlotRecipe } from '@pandacss/dev'

export const toast = defineSlotRecipe({
  className: 'toast',
  slots: toastAnatomy.keys(),
  base: {
    root: {
      alignItems: 'start',
      background: 'bg.default',
      borderRadius: 'l3',
      boxShadow: 'lg',
      display: 'flex',
      gap: '4',
      height: 'var(--height)',
      minWidth: 'sm',
      opacity: 'var(--opacity)',
      overflowWrap: 'anywhere',
      p: '4',
      position: 'relative',
      scale: 'var(--scale)',
      transitionDuration: 'slow',
      transitionProperty: 'translate, scale, opacity, height',
      transitionTimingFunction: 'default',
      translate: 'var(--x) var(--y)',
      width: 'full',
      willChange: 'translate, opacity, scale',
      zIndex: 'var(--z-index)',
    },
    title: {
      color: 'fg.default',
      fontWeight: 'medium',
      textStyle: 'sm',
    },
    description: {
      color: 'fg.muted',
      textStyle: 'sm',
    },
    actionTrigger: {
      color: 'colorPalette.plain.fg',
      cursor: 'pointer',
      fontWeight: 'semibold',
      textStyle: 'sm',
    },
    closeTrigger: {
      position: 'absolute',
      top: '2',
      insetEnd: '2',
    },
  },
})

Usage

import { Toaster, toaster } from "@/components/ui"

First, render the Toaster component in the root of your application.

<Toaster />

Then, create a toast by calling the toaster function.

toaster.create({
  title: "Toast Title",
  description: "Toast Description",
})

Examples

Closable

Set the closable prop to true to create a closable toast.

External Close

Use the toaster.dismiss method to close a toast.

toaster.dismiss(id): Dismiss a toast by its id.
toaster.dismiss(): Dismiss all toasts.

Types

Here's an example of each type of toast.

With Action

Use the action and actionLabel prop to add an action to the toast.

When the action trigger is clicked, the toast will be closed.

Promise

Use the toaster.promise to create a toast that resolves when the promise is resolved.

Next, you can define the toast options (title, description, etc.) for each state of the promise.

Custom Duration

Use the duration prop to set the duration of the toast.

Maximum Visible Toasts

Set the max prop on the createToaster function to define the maximum number of toasts that can be rendered at any one time. Any extra toasts will be queued and rendered when a toast has been dismissed.

const toaster = createToaster({
  max: 3,
})

Placement

Toasts can be displayed on all four corners of a page. We recommend picking one desired position and configure it in the createToaster function.

const toaster = createToaster({
  placement: "top-end",
})

Stacked Toasts

By default, toasts overlap each other. To make the toasts stack on top of each other, set the overlap prop to false in the createToaster function.

const toaster = createToaster({
  placement: "top-end",
  overlap: false,
})

Page Idle Behavior

Pause toast timers when the page is idle/hidden.

const toaster = createToaster({
  pauseOnPageIdle: true,
})

Offset

Set the offsets prop in the createToaster function to offset the toasts from the edges of the screen.

const toaster = createToaster({
  offsets: "20px",
})

Alternatively, you can use the offsets prop to set the offset for each edge of the screen.

const toaster = createToaster({
  offsets: { left: "20px", top: "20px", right: "20px", bottom: "20px" },
})

Props

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.