Toast | Fragments

Preview

<Toast
  title="Draft saved"
  description="We will keep it until you publish."
/>

Installation

npx @usefragments/cli add toast

Writes src/fragments/ui/components/Toast plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Anatomy

Toast is a compound: import the root and reach its parts through dot notation.

Toast.Provider

Examples

Tones

Icon and colour together carry the outcome.

import { Stack } from '@/components/Stack';

<Stack direction="column" gap="sm">
  <Toast
    title="Success!"
    description="Your changes have been saved."

With Action

One-tap way back from something destructive.

<Toast
  title="File deleted"
  description="The file has been moved to trash."
  action={{
    label: 'Undo',
    onClick: () => {},

Dismissible

onDismiss adds a close button for longer messages.

<Toast
  title="Export running"
  description="We will email you when the file is ready."
  tone="info"
  onDismiss={() => {}}
/>

API

Component props
Prop	Type	Default	Description
`onDismiss`	`function`	Not set	Callback when toast should be dismissed
`title`	`string`	Not set	Toast title
`description`	`string`	Not set	Additional message content
`tone`	`enumneutralsuccessdangerwarninginfo`	`neutral`	Colour on the shared status ramp; neutral is the plain notification. The useToast().error helper sets tone="danger".
`duration`	`number`	`8000`	Auto-dismiss duration in ms (0 = no auto-dismiss)
`action`	`object`	Not set	Optional action button { label, onClick }
`id`	`string`	Not set	—
`onPause`	`function`	Not set	Callback when auto-dismiss timer should pause
`onResume`	`function`	Not set	Callback when auto-dismiss timer should resume

Accessibility

role="alert" for anything the user must not miss
Leave enough time to read it
Never let colour be the only signal
Give the dismiss button a real label

Standards

Guidance

Use when

Confirming an action landed
Reporting whether an operation worked
News the user does not have to act on
Messages that can disappear on their own

Avoid when

Errors the user must resolve — use Dialog
Anything that must stay on screen — use Alert
Field-level validation — use form error states
Site-wide notices — use a banner

AlertalternativeUse Alert for persistent inline messages
DialogalternativeUse Dialog for messages requiring user action

Next steps

Accessibility contractThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.