The Sonner component is an opinionated toast notification — a brief message that appears temporarily to inform users of an action or status. It’s typically used for things like confirmations, errors, or alerts (e.g. “Saved successfully” or “Something went wrong”).

It includes:

• A trigger button to show the toast (you can change its text via the properties panel)
• The toast itself, which has:
  • A label (title)
  • An optional description
  • An icon slot for visual context

Usage

1. Drag the Sonner component onto the canvas.
2. Edit the trigger button label using the Component Properties panel.
3. Customize the toast content (label, description, icon) inside the component.
4. Use Variant Mode to temporarily display the toast while designing.
5. Switch back to Default variant before publishing.

Sonner makes it easy to deliver quick feedback to users in a clean, visually consistent way.