Toast

When to use

Toast reports the result of something the person just did without interrupting them: saved, copied, deleted (with undo), a background task that finished.

When not to use

• When the person must decide: Use AlertDialog.
• For an error in a field or form: Show it next to the field.
• For a state that holds across a page or section: Use InlineAlert or Banner.
• For important information that must not disappear: Show it on the page.

Anatomy

Show notification

LightDark

Copy code

import { Button, Toaster, useToast } from '@bigbang/ui';

function ShowButton() {
  const toast = useToast();
  return (
    <Button
      variant="secondary"
      onClick={() => toast.show({ tone: 'success', title: 'Changes saved', description: 'Your latest edit has been saved.' })}
    >
      Show notification
    </Button>
  );
}

export default function Default() {
  return (
    <Toaster>
      <ShowButton />
    </Toaster>
  );
}

1. Region: The “Notifications” region in the bottom corner, reached with F6.
2. Tone icon: Success, info, warning, error or a spinner.
3. Title and description.
4. Action: Optional, one button.
5. Close button.

Behaviour

• A toast rises in from below; up to three stack on top of each other and the oldest fades out.
• Hovering or focusing the region expands the stack and pauses the timer.
• Swiping down or towards the edge closes it.
• The default timeout is 5 seconds and cannot be shorter. danger stays until closed.
• Below 640 px the toast spans the screen.

Guidelines

• Write the title short, in the past tense: “Changes saved”.
• Use at most one action per toast, and make the action possible another way too.
• Do not show many toasts at once; update the same event with id.
• For errors, say what to do in the description.

Content

Turkish	English
Değişiklikler kaydedildi	Changes saved
Öğe silindi	Item deleted
Geri al	Undo
Kaydedilemedi	Could not save

Glass

Under a Provider material="glass", the toasts turn glass. The prop is on Toaster. material="solid" keeps it solid.

Related components

• AlertDialog: For a confirmation that needs a decision.
• Button: To show success on the button itself.
• Spinner: The spinner in the loading toast.