Skip to content
Components

Toaster

Renders the toasts queued with toast(): light bordered cards on the neutral popover surface, each with a per-type coloured icon and a close button, stacked at the bottom centre by default. Built on Base UI Toast.

Palette saved to Coastal Kitchen

Usage

import { toast, Toaster, ToasterPosition, ToasterProps, ToastOptions, ToastPromiseMessages, ToastType } from "@instruments/materia-ui/components/toast";

Best practices

  • Use toasts for transient, auto-dismissing notifications; a persistent inline message is an Alert.

  • Mount <Toaster /> exactly once near the app root, then fire toasts with toast() from @instruments/materia-ui/components/toast - don't render a Toaster per view.

  • Press F6 to move focus into the toasts; hovering or focusing the stack pauses dismissal and fans it open.

Props

PropTypeDefaultDescription
positionToasterPosition"bottom-center"

Where the toasts appear.

durationnumber4000

How long a toast stays, in milliseconds, unless it sets its own duration.

limitnumber3

How many toasts show at once; older ones fade out of the stack.

classNamestring

Extra classes for the viewport the toasts stack in.

Also exports

  • consttoast
  • typeToasterPosition
  • interfaceToasterProps
  • interfaceToastOptions
  • interfaceToastPromiseMessages
  • typeToastType

Composition

Builds on

Button, Flex, Icon