Toast

Region that renders queued toasts; call toast() anywhere to show one.

Import

import { Toaster } from '@marbleui/ui'

Props

<Toaster>

Prop	Type	Default
children	`ReactNode`	`—`
className	`string`	`—`
position	`'bottom-right' \| 'top-right' \| 'bottom-center'`	`'bottom-right'`
variant	`'surface' \| 'inverted'`	`'surface'`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria Text · React Aria UNSTABLE_Toast · React Aria UNSTABLE_ToastContent · React Aria UNSTABLE_ToastQueue · React Aria UNSTABLE_ToastRegion. Follow the primitive's docs for the full keyboard map.

Usage notes

Brief, non-blocking feedback after an action. Render <Toaster /> once near the app root, then call toast() from anywhere.

toast({ title: 'Issue archived', description: 'ACME-142 moved to the archive.', action: { label: 'Undo', onAction: restore } })

Toasts are announced politely and pause while hovered or focused; F6 moves focus into the toast region.
Keep them short and never put the only path to an action in a toast; offer Undo as a convenience.
tone: 'danger' for failures; errors that need a fix belong inline next to the field.

Example source · show

import { Button } from '../button'
import { Toaster, toast } from './toast'

const Triggers = () => (
  <div className="flex flex-wrap gap-2">
    <Button variant="outline" onPress={() => toast({ title: 'Changes saved', tone: 'success' })}>Success</Button>
    <Button
      variant="outline"
      onPress={() => toast({ title: 'Issue archived', description: 'ACME-142 moved to the archive.', action: { label: 'Undo', onAction: () => {} } })}
    >
      With action
    </Button>
    <Button variant="outline" onPress={() => toast({ title: 'Sync failed', description: 'Check your connection and try again.', tone: 'danger' })}>
      Error
    </Button>
  </div>
)

export const styles = {
  Surface: () => (
    <>
      <Triggers />
      <Toaster />
    </>
  ),
  Inverted: () => (
    <>
      <Triggers />
      <Toaster variant="inverted" position="bottom-center" />
    </>
  ),
}

Source: packages/ui/src/toast/toast.tsx

Catalog

Category: feedback
Priority: Foundation
Primitive: react-aria
React Aria: Toast + ToastQueue
Base UI: Toast