Toast

A non-blocking notification that displays brief messages to users. Supports auto-dismiss, multiple variants, and action buttons.

variant

default

success

error

warning

info

position

bottom-right

bottom-center

bottom-left

top-right

top-center

top-left

#Installation

bunx --bun barefoot add toast

#Usage

1import {2  ToastProvider,3  Toast,4  ToastTitle,5  ToastDescription,6  ToastClose,7  ToastAction,8} from "@/components/ui/toast"910function ToastDemo() {11  const [open, setOpen] = createSignal(false)1213  return (14    <ToastProvider position="bottom-right">15      <Button onClick={() => setOpen(true)}>Show Toast</Button>16      <Toast open={open()} onOpenChange={setOpen}>17        <div className="flex-1">18          <ToastTitle>Event created</ToastTitle>19          <ToastDescription>Sunday, December 03, 2023 at 9:00 AM</ToastDescription>20        </div>21        <ToastClose />22      </Toast>23    </ToastProvider>24  )25}

#Examples

#Default

<Toast open={open()} onOpenChange={setOpen}>
  <div className="flex-1">
    <ToastTitle>Event created</ToastTitle>
    <ToastDescription>Sunday, December 03, 2023 at 9:00 AM</ToastDescription>
  </div>
  <ToastClose />
</Toast>

#Success

<Toast variant="success" open={open()} onOpenChange={setOpen}>
  <div className="flex-1">
    <ToastTitle>Changes saved</ToastTitle>
    <ToastDescription>Your changes have been saved successfully.</ToastDescription>
  </div>
  <ToastClose />
</Toast>

#Error

<Toast variant="error" open={open()} onOpenChange={setOpen}>
  <div className="flex-1">
    <ToastTitle>Something went wrong</ToastTitle>
    <ToastDescription>There was a problem with your request.</ToastDescription>
  </div>
  <ToastAction altText="Try again">Try again</ToastAction>
</Toast>

#Warning

<Toast variant="warning" open={open()} onOpenChange={setOpen}>
  <div className="flex-1">
    <ToastTitle>Heads up</ToastTitle>
    <ToastDescription>You are about to exceed your storage limit.</ToastDescription>
  </div>
  <ToastClose />
</Toast>

#Info

<Toast variant="info" open={open()} onOpenChange={setOpen}>
  <div className="flex-1">
    <ToastTitle>New update available</ToastTitle>
    <ToastDescription>A new version has been released.</ToastDescription>
  </div>
  <ToastClose />
</Toast>

#With Action

<Toast open={open()} onOpenChange={setOpen} duration={10000}>
  <div className="flex-1">
    <ToastTitle>Item deleted</ToastTitle>
    <ToastDescription>The item has been removed from your list.</ToastDescription>
  </div>
  <div className="flex gap-2">
    <ToastAction altText="Undo deletion">Undo</ToastAction>
    <ToastClose />
  </div>
</Toast>

#Position

<ToastProvider position="top-center">
  <Toast open={open()} onOpenChange={setOpen}>
    <div className="flex-1">
      <ToastDescription>Top Center</ToastDescription>
    </div>
    <ToastClose />
  </Toast>
</ToastProvider>

#API Reference

ToastProvider

Prop	Type	Default	Description
position	'top-right' \| 'top-center' \| 'top-left' \| 'bottom-right' \| 'bottom-center' \| 'bottom-left'	'bottom-right'	Position of the toast container on the viewport.

Toast

Prop	Type	Default	Description
variant	'default' \| 'success' \| 'error' \| 'warning' \| 'info'	'default'	Visual variant of the toast.
open	boolean	false	Whether the toast is visible.
onOpenChange	(open: boolean) => void	-	Callback when the open state changes (e.g., on auto-dismiss or close).
duration	number	5000	Auto-dismiss duration in milliseconds. Set to 0 to disable auto-dismiss.

ToastTitle

Prop	Type	Default	Description
children	Child	-	The title text to display.

ToastDescription

Prop	Type	Default	Description
children	Child	-	The description text to display.

ToastClose

Prop	Type	Default	Description

ToastAction

Prop	Type	Default	Description
altText	string	-	Alternative text for accessibility.
onClick	() => void	-	Click handler called before auto-dismiss.