Design System Beacon

Toast

Toast notifications provide brief, non-intrusive feedback about user actions. Use toasts to display success messages, errors, warnings, or general information.

Overview

Toasts are temporary notification messages that appear to inform users about the result of an action or to provide important information. They typically appear at the edge of the screen and automatically dismiss after a few seconds, though users can also manually dismiss them.

All toast styles are built using design tokens, ensuring consistency across themes and hues. Use the interactive playground below to explore all available combinations.

Interactive Playground

Use the controls to customize the toast and see how it looks in real-time. Toggle between themes and hues to see how toasts adapt to different contexts.

Color

Variant

Duration

Message

Action Label

Show Action

Dismissible

Show Icon

Full Width

Border

Toast Info

<Toast />

Anatomy

A toast consists of several parts that work together to create a cohesive notification element.

Toast Info

Undo

Containerpadding, border-radius, shadow

IconOptional leading icon (24px)

Message--body-regular-text-size

Action ButtonOptional action (e.g., "Undo")

Close ButtonOptional dismiss control (24px)

Variants & States

Toasts come in different variants to communicate different types of information.

Default

General information notifications using page-secondary background and neutral foreground.

Toast Info

Success

Success notifications for positive actions and confirmations.

Toast Info

Error

Error notifications for failures and critical issues.

Toast Info

Warning

Warning notifications for cautionary states and important alerts.

Toast Info

Without Action

Toasts can be displayed without an action button for simple notifications.

Toast Info

Without Icon

Toasts can be displayed without a leading icon for a cleaner look.

Toast Info

Non-dismissible

Toasts can be configured to not show a close button, requiring automatic dismissal.

Toast Info

Full Width

Toasts can stretch to fill the full width of their container.

Toast Info

Usage Guidelines

Use toasts for non-critical, temporary notifications.
Keep messages concise and actionable.
Use appropriate variants based on message type (success, error, warning).
Provide action buttons for reversible actions (e.g., "Undo").
Allow users to dismiss toasts manually.
Position toasts consistently (typically top-right or bottom-right).
Limit the number of visible toasts to avoid overwhelming users.

Don't

Don't use toasts for critical errors that require immediate attention.
Don't use toasts for information that users need to reference later.
Don't stack too many toasts at once.
Don't use vague or unclear messages.
Don't make toasts too large or intrusive.
Don't use toasts for primary navigation or actions.
Don't auto-dismiss error toasts too quickly.

Accessibility

Toasts should use appropriate ARIA roles (role="status" for informational, role="alert" for errors).
Use aria-live regions to announce toast messages to screen readers.
Ensure sufficient color contrast for all toast variants.
Provide keyboard-accessible dismiss controls.
Allow sufficient time for users to read and interact with toasts.
Provide clear focus management when toasts appear.

API Reference

Toast component props and types.

ToastProps

interface ToastProps {
  variant?: "default" | "success" | "error" | "warning";
  message?: React.ReactNode;
  actionLabel?: string;
  onAction?: () => void;
  showAction?: boolean;
  dismissible?: boolean;
  onDismiss?: () => void;
  leadingIcon?: React.ReactNode;
  showIcon?: boolean;
  closeIcon?: React.ReactNode;
  fullWidth?: boolean;
  duration?: number;
}

Props

variant

"default" | "success" | "error" | "warning"

"default"

Visual tone of the toast

message

React.ReactNode

"Toast Info"

Primary message content

actionLabel

string

"Undo"

Optional action label (e.g., "Undo")

showAction

boolean

true

Toggle visibility of the action button

dismissible

boolean

true

Show the dismiss control

showIcon

boolean

true

Hide the leading icon

fullWidth

boolean

false

Stretch to the parent's width

duration

number

undefined

Auto-dismiss duration in milliseconds

Usage Examples

Copyable code snippets for common toast use cases.

Basic Toast

Toast Info

import { Toast } from 'beacon-ui';

<Toast />

All Variants

Toast Info

import { Toast } from 'beacon-ui';

<Toast variant="default" />
<Toast variant="success" />
<Toast variant="error" />
<Toast variant="warning" />

With Custom Message

File saved successfully

import { Toast } from 'beacon-ui';

<Toast message="File saved successfully" />

With Action Handler

Item deleted

import { Toast } from 'beacon-ui';

<Toast
  message="Item deleted"
  actionLabel="Undo"
  onAction={() => console.log("Undo clicked")}
  onDismiss={() => console.log("Dismissed")}
/>

Full Width

This toast spans the full width

import { Toast } from 'beacon-ui';

<Toast fullWidth message="This toast spans the full width" />