Examples

Real situations, grouped by category. Run each one, then copy the code.

Feedback

Saved

The default confirmation. Expands to show a description, then collapses.

Show code

dynaura.success({ title: "Changes saved", description: "Your profile is up to date." });

Feedback

Payment declined

An error with a recovery action. Clicking the button dismisses the toast.

Show code

dynaura.error({
  title: "Payment failed",
  description: "Card ending 4242 was declined.",
  button: { title: "Retry", onClick: retry },
});

Feedback

Storage warning

A warning that needs a moment of attention.

Show code

dynaura.warning({ title: "Storage almost full", description: "92 MB of 100 MB used." });

Feedback

Link copied

A short, quiet confirmation with no description.

Show code

dynaura.info({ title: "Link copied", duration: 1600 });

Async

Save with a promise

One island morphs from loading to success or error.

Show code

dynaura.promise(save(), {
  loading: "Saving...",
  success: (data) => ({ title: "Saved", description: `Version ${data.v}` }),
  error: { title: "Failed", description: "Check your connection." },
});

Async

Upload progress

A value bar and rolling digits, patched in place, ending in confetti.

Show code

const id = dynaura.loading({ title: "Uploading", progress: 0 });
onProgress((p) => dynaura.update(id, { progress: p }));
dynaura.update(id, { type: "success", title: "Upload complete", progress: undefined, confetti: true });

Async

Undo a delete

A longer duration and an Undo action. The pattern for reversible deletes.

Show code

dynaura.info({
  title: "Message deleted",
  duration: 6000,
  button: { title: "Undo", onClick: restore },
});

Live

Voice memo

A sticky live activity with a running timer and a Stop action.

Show code

dynaura.live({
  title: "Recording voice memo",
  button: { title: "Stop", onClick: stop },
});

Live

Now playing

The waveform flavor of a live activity.

Show code

dynaura.live({ title: "Now playing", kind: "wave", button: { title: "Pause", onClick: pause } });

Live

Ride arriving

A live activity with a trailing ETA slot.

Show code

dynaura.live({
  title: "Driver arriving",
  trailing: "3 min",
  button: { title: "Call", onClick: call },
});

Cards

Boarding pass

variant: card with a custom body. Colors follow the theme through CSS variables.

Show code

dynaura.info({
  title: "Boarding soon",
  trailing: "40 min",
  variant: "card",
  duration: 9000,
  description: <BoardingPass />,
  button: { title: "Show boarding pass", onClick: openPass },
});

Cards

Delivery tracker

A card that carries a small status summary instead of a paragraph.

Show code

dynaura.success({
  title: "Out for delivery",
  trailing: "12 min",
  variant: "card",
  duration: 9000,
  description: <DeliveryCard />,
  button: { title: "Track order", onClick: track },
});

Social

New message

A preview with a Reply action.

Show code

dynaura.info({
  title: "Maya sent a message",
  description: "Are we still on for 6?",
  button: { title: "Reply", onClick: reply },
});

Social

Queued activity

Show events one after another instead of replacing the island.

Show code

dynaura.info({ title: "Invite sent to Maya", queue: true, duration: 1600 });
dynaura.success({ title: "Maya joined", queue: true, duration: 1600 });
dynaura.info({ title: "Workspace ready", queue: true, duration: 1600 });

Social

Celebrate a follow

Confetti for the moments that deserve it. Skipped under reduced motion.

Show code

dynaura.success({ title: "You followed Maya", confetti: true });

Commerce

Order placed

Confirmation with a next step.

Show code

dynaura.success({
  title: "Order placed",
  description: "Arrives Thursday.",
  confetti: true,
  button: { title: "Track order", onClick: track },
});

Commerce

Added to cart

A fast confirmation that links onward.

Show code

dynaura.success({
  title: "Added to cart",
  description: "Linen shirt, size M.",
  button: { title: "View cart", onClick: openCart },
});