← All components Feedback & overlays

Toast

Non-modal feedback with F8 viewport-focus (Radix's signature). Pause-on-hover/focus/blur, polite vs assertive.

Inspired by Radix Toast (Pedro Duarte), Sonner (Emil Kowalski), Apple HIG Banners.

Preview

What it looks like.

Each button fires a real toast scoped to this frame.

Hover a toast to pause its timer. Press F8 to focus the viewport.

Live — the real component, scoped to this frame.

Usage

Drop it into your app.

import { ToastProvider, ToastViewport, useToast } from '@locara/components'

// At app root:
<ToastProvider>
  <App />
  <ToastViewport position="bottom-right" />
</ToastProvider>

// In any component:
const toast = useToast()
toast.show({ title: 'Model downloaded', description: 'Qwen 2.5 7B', tone: 'success' })
toast.show({
  title: 'Inference failed',
  tone: 'danger',
  assertive: true,
  action: { label: 'Retry', onClick: retry },
})

Or copy the source into your repo: locara add toast

Design notes

Why it works this way.

Default duration 5000ms; 7000ms when an action is present (the user needs time to react). Toasts with role=alert (assertive) interrupt — reserve for failures and time-critical user-initiated events. The F8 shortcut focuses the toast viewport from anywhere on the page, which Radix invented as a keyboard alternative to mouse hover-pause.