Toast

Render a single toast card with a message, optional description, icon, close button, and action.

Toast renders one presentational toast card with a message, an optional description, icon, close button and action. It does not provide a queue, positioning, timers, or animation; render it inside your own toast container and control its lifetime yourself.

Project archivedYou can restore it from Settings.

Import#

typescript

import { Toast } from "@reactberry/system/blocks";

Usage#

typescript

import { useState } from "react";
import { Toast } from "@reactberry/system/blocks";
import { Box } from "@reactberry/system/elements";

export default function UndoToast({ onUndo }: { onUndo: () => void }) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <Box position="fixed" bottom="1rem" right="1rem">
      <Toast
        variant="success"
        message="Project archived"
        description="You can restore it from Settings."
        onClose={() => setVisible(false)}
        action={{ label: "Undo", onClick: onUndo }}
      />
    </Box>
  );
}

Examples#

Variants#

variant sets the background and text colour: "default", "success", "info", "warning" or "error".

Copied to clipboard

Changes saved

A new version is available

Your trial ends in 3 days

Upload failed

Icon and description#

Pass an element to icon and secondary text to description. These toasts also set role through spread props so they are announced.

Upload failedreport-q3.pdf is larger than 10 MB.

Invite sentana@example.com can now join the workspace.

API#

Toast#

Prop	Type	Default	Description
`message*`	`ReactNode`	—	Primary text.
`description`	`string`	—	Secondary text shown below the message at 80% opacity.
`variant`	`"default""error""warning""success""info"`	`"default"`	Background and text colour.
`icon`	`ReactNode`	—	Element shown before the text.
`onClose`	`(() => void)`	—	When set, renders a circular close button that calls it.
`action`	`{ label: string; onClick: () => void; }`	—	When set, renders a ghost button with `label` after the close button.

Any other props (BoxProps) are spread onto the outer Box after the variant styles, so defaults such as width="22.5rem", p, shape, and boxShadow can be overridden.

Accessibility#

The toast has no ARIA live region role. Add role="status" or role="alert" through spread props if it should be announced.
The close button contains only an icon and has no aria-label or other accessible name.
The close and action buttons are native button elements.

Notes#

Variant colours: default uses skin="translucent" with palette.grays.11 text; success, error, info, and warning use the 0 and 11 shades of the green, red, brand, and yellow palettes.
ToastProps is not exported.