Toast

Description

.bp-toast renders feedback notifications in a fixed bottom-right stack. The BpToast.show() JS API creates toasts dynamically — no HTML authoring needed. Supports four semantic variants, configurable auto-dismiss, manual close, and an optional action button.

Usage

All variants

<style>
.demo-toast__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
</style>
<div class="demo-toast__actions">
<button class="bp-btn" type="button"
  onclick="BpToast.show({ message: 'Changes saved', variant: 'success' })">
  Success
</button>
<button class="bp-btn bp-btn--secondary" type="button"
  onclick="BpToast.show({ message: 'Upload failed — max 10 MB', variant: 'error' })">
  Error
</button>
<button class="bp-btn bp-btn--secondary" type="button"
  onclick="BpToast.show({ message: 'Session expiring in 5 min', variant: 'warning' })">
  Warning
</button>
<button class="bp-btn bp-btn--secondary" type="button"
  onclick="BpToast.show({ message: 'Message deleted', variant: 'info', action: { label: 'Undo', onClick: () => console.log('undo') } })">
  Info + Undo
</button>
</div>

JS API

// Include once per page: <script src="/bp-toast.js"></script>
BpToast.show({
  message: 'Changes saved',
  variant: 'success', // 'success' | 'error' | 'warning' | 'info'  (default: 'info')
  duration: 3000, // ms before auto-dismiss; 0 = no auto-dismiss (default: 3000)
  action: {
    // optional
    label: 'Undo',
    onClick: () => {},
  },
})

No auto-dismiss (persistent)

<button class="bp-btn" type="button"
onclick="BpToast.show({ message: 'Background sync in progress', variant: 'info', duration: 0 })">
Show persistent toast
</button>

Public API

Variable	Default	Description
`--toast-width`	`22rem`	Width of each toast (set on region)
`--toast-radius`	`var(--bp-radius-lg)`	Border radius
`--toast-bg`	color-mix tinted	Background override
`--toast-color`	`var(--bp-color-text)`	Text color override
`--toast-border`	`transparent`	Border color override

Variants

Class	Token	Use for
`bp-toast--success`	`--bp-color-success`	Confirmation, save, completion
`bp-toast--error`	`--bp-color-error`	Failures, destructive outcomes
`bp-toast--warning`	`--bp-color-warning`	Non-blocking caution
`bp-toast--info`	`--bp-color-info`	Neutral updates

Accessibility

role="status" (polite) on success/warning/info toasts; role="alert" (assertive) on error toasts.
Two hidden aria-live regions are created lazily in the DOM — they mirror the toast message for reliable screen reader announcement regardless of stacking context.
Auto-dismiss is paused on mouseenter — satisfies WCAG 2.2.2 (Pause, Stop, Hide).
Close button has aria-label="Dismiss" — required for icon-only controls.
Toast icon is aria-hidden="true" — decorative only.
Color is never the sole differentiator — icon + text always present.
All interactive elements (close, action) have :focus-visible rings via var(--bp-focus-ring).

Browser APIs

API	Availability	Used for	Without it	Polyfill
`@starting-style`	Newly available Baseline 2024	Slide-up entrance animation	Toast appears instantly	None needed
`color-mix()`	Widely available Baseline 2023	Tinted variant backgrounds	Solid token color	None needed
`isolation: isolate`	Widely available Baseline 2020	Self-contained stacking context	Inherits page stacking	None needed

Internals

#bp-toast-region is created lazily by JS on first BpToast.show() call — do not place it manually.
--_border is component-private — do not set directly. Use the variant classes.