show_toast

Displays a toast notification to the user.

Syntax

json

{
  "type": "show_toast",
  "message": "Operation completed!",
  "level": "success"
}

Properties

Property	Type	Required	Description
`message`	string	Yes	Notification message
`level`	string	-	Toast level (default: `info`)
`title`	string	-	Toast title
`duration`	number	-	Display duration (ms)
`action`	object	-	Action button

Levels

Level	Color	Use Case
`info`	Blue	General information
`success`	Green	Success confirmations
`warning`	Yellow	Warnings
`error`	Red	Error messages

Examples

Basic toast:

json

{
  "type": "show_toast",
  "message": "Settings saved"
}

Success toast:

json

{
  "type": "show_toast",
  "message": "Item created successfully!",
  "level": "success"
}

Error toast:

json

{
  "type": "show_toast",
  "message": "Failed to save changes",
  "level": "error"
}

Warning toast:

json

{
  "type": "show_toast",
  "message": "Your session will expire in 5 minutes",
  "level": "warning"
}

With title:

json

{
  "type": "show_toast",
  "title": "Success",
  "message": "Your profile has been updated",
  "level": "success"
}

With duration:

json

{
  "type": "show_toast",
  "message": "Copied to clipboard",
  "level": "success",
  "duration": 2000
}

With dynamic message:

json

{
  "type": "show_toast",
  "message": "Welcome back, {{state.user.name}}!",
  "level": "success"
}

From error response:

json

{
  "type": "call_api",
  "api": "saveData",
  "on_error": [
    {
      "type": "show_toast",
      "message": "Error: {{$error.message}}",
      "level": "error"
    }
  ]
}

Common Patterns

CRUD Operations:

json

{ "type": "show_toast", "message": "Item created", "level": "success" }
{ "type": "show_toast", "message": "Changes saved", "level": "success" }
{ "type": "show_toast", "message": "Item deleted", "level": "success" }
{ "type": "show_toast", "message": "Operation failed", "level": "error" }

Copy to clipboard:

json

{
  "type": "Button",
  "icon": "Copy",
  "events": {
    "on_click": [
      { "type": "copy", "text": "{{state.shareUrl}}" },
      { "type": "show_toast", "message": "Link copied!", "level": "success", "duration": 2000 }
    ]
  }
}

After navigation:

json

{
  "on_mount": [
    {
      "type": "conditional",
      "condition": "{{params.created}}",
      "then": [
        { "type": "show_toast", "message": "Item created successfully!", "level": "success" }
      ]
    }
  ]
}

Best Practices

Be concise - Keep messages short and clear
Use appropriate levels - Match level to message importance
Confirm actions - Show success after operations
Include details in errors - Help users understand what went wrong
Don’t overuse - Avoid toast fatigue