Skip to main content

​
Toast

A temporary notification that appears on screen to provide feedback or information.

​
Anatomy

<Toast.Provider>
  <Toast.Portal>
    <Toast.Viewport position="bottom-right">
      <Toast.Root variant="card">
        <Toast.Content>
          <Toast.Icon tone="success" />
          <Toast.TextWrapper>
            <Toast.Title>Title</Toast.Title>
            <Toast.Description>Description</Toast.Description>
            <Toast.Actions>
              <Toast.Action>Action</Toast.Action>
            </Toast.Actions>
          </Toast.TextWrapper>
          <Toast.Close />
        </Toast.Content>
      </Toast.Root>
    </Toast.Viewport>
  </Toast.Portal>
</Toast.Provider>

​
Components

​
Toast.Provider

Provides toast context and manages toast queue.
​
timeout
number
default:"5000"
Duration in milliseconds before auto-dismissing toasts
​
limit
number
default:"5"
Maximum number of toasts to display at once

​
Toast.Portal

Portal that renders toasts outside the normal DOM hierarchy.
​
container
HTMLElement
Optional container element to render toasts into

​
Toast.Viewport

Container that positions toasts on screen.
​
position
string
default:"bottom-right"
Where to position the toast viewport. Options: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center
​
className
string
Additional CSS classes

​
Toast.Root

The root container for a toast notification.
​
variant
string
default:"card"
Visual variant. Options: card, compact
​
open
boolean
Controlled open state
​
onOpenChange
(open: boolean) => void
Callback when open state changes
​
className
string
Additional CSS classes

​
Toast.Content

Content container for card variant toasts.
​
className
string
Additional CSS classes

​
Toast.CompactContent

Content container for compact variant toasts.
​
className
string
Additional CSS classes

​
Toast.Title

The title text of the toast.
​
className
string
Additional CSS classes

​
Toast.Description

The description text of the toast.
​
className
string
Additional CSS classes

​
Toast.Icon

Icon that indicates the tone of the toast.
​
tone
string
default:"default"
Visual tone that determines the icon and color. Options: default, info, success, warning, danger
​
className
string
Additional CSS classes

​
Toast.Close

Button to dismiss the toast.
​
className
string
Additional CSS classes

​
Toast.Action

Action button for card variant (tertiary style).
​
altText
string
required
Accessible alternative text describing the action
​
className
string
Additional CSS classes

​
Toast.CompactAction

Action button for compact variant (link style).
​
altText
string
required
Accessible alternative text describing the action
​
className
string
Additional CSS classes

​
Toast.TextWrapper

Groups title and description for card variant.
​
className
string
Additional CSS classes

​
Toast.CompactTextWrapper

Groups title and description for compact variant.
​
className
string
Additional CSS classes

​
Toast.Actions

Container for action buttons in card variant.
​
className
string
Additional CSS classes

​
Toast.CompactActions

Container for action buttons in compact variant.
​
className
string
Additional CSS classes

​
Hooks

​
useToastManager

Hook for programmatically managing toasts. 
const { addToast, removeToast, clearToasts } = useToastManager()

addToast({
  title: 'Success',
  description: 'Your changes have been saved',
})

​
Variants

​
card

Full-width toast with stacked layout.

​
compact

Inline toast with horizontal layout.

​
Tones

​
default

Neutral informational tone.

​
info

Informational feedback (blue).

​
success

Success feedback (green).

​
warning

Warning feedback (yellow/orange).

​
danger

Error or destructive feedback (red).

Build docs developers (and LLMs) love

Get started for freeTalk to us