Toast

A brief, non-blocking notification that appears temporarily. Toasts inform users of events without interrupting their workflow.

Preview

Changes saved

Your profile has been updated.

Upload failed

The file exceeds the maximum size.

Connection unstable

Some features may be slow.

New comment

Alex left a comment on your pull request.

Behaviour

• Toasts appear temporarily and auto-dismiss after a configurable duration (default 5 s).
• Error toasts should persist until manually dismissed.
• Multiple toasts stack vertically with an 8 px gap.
• Positioned at the top-right or bottom-right of the viewport.

Props

Prop	Type	Default	Description
variant	'info' | 'success' | 'warning' | 'error'	'info'	Semantic colour for icon
title	string	--	Bold heading
description	string	--	Body text
duration	number	5000	Auto-dismiss time in ms (0 for persistent)
onDismiss	() => void	--	Dismiss callback
position	'top-right' | 'bottom-right' | 'bottom-center'	'bottom-right'	Screen position

Code example

React

import { toast } from '@thepace/lexicon/components';

toast.success({ title: 'Saved', description: 'Your changes are live.' });
toast.error({ title: 'Failed', description: 'Upload failed.', duration: 0 });

Vanilla HTML

<div class="lex-toast lex-toast--success" role="status">
  <span class="lex-toast__icon"><!-- check icon --></span>
  <div class="lex-toast__content">
    <div class="lex-toast__title">Changes saved</div>
    <div class="lex-toast__description">Your profile has been updated.</div>
  </div>
  <button class="lex-toast__dismiss" aria-label="Dismiss">×</button>
</div>

CSS class reference

Class	Purpose
.lex-toast	Base toast card
.lex-toast--info	Info icon colour
.lex-toast--success	Success icon colour
.lex-toast--warning	Warning icon colour
.lex-toast--error	Error icon colour
.lex-toast-stack	Stacked container

Accessibility

• Use role="status" for informational toasts, role="alert" for errors.
• aria-live="polite" for non-urgent, aria-live="assertive" for errors.
• Dismiss button has aria-label="Dismiss".
• Auto-dismiss duration should be at least 5 seconds.
• Keyboard: toasts should be focusable when they appear.

Guidelines

Do

• Keep toast messages short — one title and one sentence.
• Use auto-dismiss for success messages.
• Persist error toasts until the user dismisses them.

Don't

• Don't use toasts for critical errors that require user action — use an Alert or Modal.
• Don't show more than 3 toasts simultaneously.