Toast
Usage
Toast notifications provide temporary feedback to users. They appear for a set duration and can be dismissed manually.
YAML Export
1. Copy the YAML from the component view.
2. Paste it into your Canvas app.
3. Bind the Visible property to a variable or formula to control when the toast appears.
Triggering a Toast
Method 1: Using a Variable
Set(varShowToast, true);
Then bind the toast's Visible property:
Toast1:
Type: Label
Visible: varShowToast
Text: "Operation completed successfully"
Method 2: Direct Formula
Toast1:
Type: Label
Visible: If(IsBlank(MyData), false, true)
Text: "Data loaded successfully"
Position
The toast position is set in the component settings. Common positions:
- Top right (default)
- Top center
- Bottom right
Duration
Set the duration in milliseconds (default: 3000ms). The toast will automatically hide after this time.
Types
- Info: General information (blue)
- Success: Successful operations (green)
- Warning: Warnings (yellow)
- Error: Errors (red)
Color Modes
- Default colors: Uses predefined colors per type.
- Custom colors: Edit background, text, and accent colors directly.
- Theme Tokens: Uses tokens from Theme Builder (Pro feature).
Export Modes
- Safe: Basic toast with message and type.
- Advanced: Includes custom colors, shadows, and glow effects (Pro feature).