QML
← All components

Toast

Show a brief notification for an action result, such as a successful save or a failed request.

import Syidax.Core.Toast

Supported QML types

TypeDefinition / role
Non-visual host that creates and closes toast notifications by variant.
One toast notification displayed at a window corner, closed manually or after a duration.
SingletonShared singleton that stacks open toast items; SyToastItem manages registration automatically.

Learn by example

Previews are images of native Qt runs. Use the buttons below each image to view a result.

01 Basic composition

A toast is a transient notification docked to a window corner.

Qt capture · image
Basic composition · After Saved
QML code
import QtQuick
import Syidax.Core

Item {
    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    property QtObject settings: QtObject {
        id: storyArgs
        property string position: "bottomRight"
        property bool closable: true
        property int duration: 3000
        property bool latestTop: false
        property string animation: "fade"
    }

    readonly property string optionText: "{ header: " + JSON.stringify("Saved") + ", body: " + JSON.stringify("Your changes are in.") + (storyArgs.closable ? ", closable: true" : "") + (storyArgs.position !== "bottomRight" ? ", position: " + JSON.stringify(storyArgs.position) : "") + " }"

    Column {
        spacing: 12
        SyToast {
            id: toaster
            duration: storyArgs.duration
            latestTop: storyArgs.latestTop
            animation: storyArgs.animation
        }
        Row {
            spacing: 8
            SyButton { id: exampleControl1;  text: "Saved"; onClicked: toaster.createSuccessToast({ header: "Saved", body: "Your changes are in.", closable: storyArgs.closable, position: storyArgs.position }) }
            SyButton { id: exampleControl2;  text: "Failed"; onClicked: toaster.createErrorToast({ header: "Failed", body: "The server did not answer.", closable: storyArgs.closable, position: storyArgs.position }) }
            SyButton { id: exampleControl3;  text: "Update"; onClicked: toaster.createInfoToast({ header: "Update", body: "A new version is ready.", closable: storyArgs.closable, position: storyArgs.position }) }
            SyButton { text: "Heads up"; onClicked: toaster.createWarningToast({ header: "Heads up", body: "Your session ends in 5 minutes.", closable: storyArgs.closable, position: storyArgs.position }) }
            SyButton { text: "Note"; onClicked: toaster.createNeutralToast({ header: "Note", body: "Nothing else to do.", closable: storyArgs.closable, position: storyArgs.position }) }
        }
        Text {
            text: "toaster.toasts.length === " + toaster.toasts.length
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
    }

}

02 SyToastItem · variant · closable · footer · icon

SyToastItem is the card itself, declared by hand instead of made by a host: open: true shows it as soon as it is created and open: false (or close()) dismisses it.

Qt capture · image
SyToastItem · variant · closable · footer · icon · Default
Default execution
QML code
import QtQuick
import Syidax.Core

Item {
    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    // Focused Gallery routes: keep only the selected API and its prerequisites.
    id: featureStory

    Column {
        spacing: 12
        SyToastItem { id: featureTarget0; visible: true; open: true; variant: "success"; title: "Saved"; message: "Your changes are in."; closable: true }
        SyToastItem { id: featureTarget1; visible: true; open: true; variant: "error"; title: "Failed"; message: "The server did not answer."; closable: true }
        SyToastItem { id: featureTarget2; visible: true; open: true; variant: "info"; title: "Update"; message: "A new version is ready." }
        SyToastItem { id: featureTarget3; visible: true; open: true; variant: "warning"; title: "Heads up"; message: "Your session ends in 5 minutes."; footer: Text { text: "just now"; font.family: Theme.fontFamily; font.pixelSize: 12; color: Theme.toast.timestampTextEnabled } }
        SyToastItem { id: featureTarget4; visible: true; open: true; variant: "neutral"; title: "Note"; message: "Nothing else to do."; icon: SyIcon { source: Icons.toastInfo; size: "xxlarge"; anchors.centerIn: parent } }
        Text {
            text: "Open from the start: they stack at the bottom-right corner of the window."
            font.family: Theme.fontFamily
            font.pixelSize: 13
            color: Theme.semantic.textSubtle
        }
    }
}

03 created · closed

Two signals, on two types.

Qt capture · image
created · closed · After Update
QML code
import QtQuick
import Syidax.Core

Item {
    component EventLog: Rectangle {
        id: logBox
        property var lines: []
        implicitWidth: 440
        implicitHeight: Math.max(56, logText.implicitHeight + 24)
        radius: 4; color: Theme.semantic.backgroundBold
        function log(value) { lines = lines.slice(-3).concat([String(value)]) }
        Text {
            id: logText; x: 12; y: 12; width: parent.width - 24
            text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
            wrapMode: Text.Wrap; color: Theme.semantic.textDefault
            font.family: Theme.monoFontFamily; font.pixelSize: 12
        }
    }

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    // Focused Gallery routes: keep only the selected API and its prerequisites.
    id: featureStory

    

    Column {
        spacing: 12
        SyToast {
            id: toaster
            duration: 2000
            onCreated: (item) => { if (true) { {
                output.log(("created: %1").arg(item.title))
                item.closed.connect(() => output.log(("closed: %1").arg(item.title)))
            } } }
        }
        SyButton { id: exampleControl1;  text: "Update"; onClicked: toaster.createInfoToast({ header: "Update", body: "A new version is ready.", closable: true }) }
        EventLog { id: output }
    }
}

04 createToast · closeToast · closeAll

The host's methods.

Qt capture · image
createToast · closeToast · closeAll · After toaster.createToast("warning", …)
QML code
import QtQuick
import Syidax.Core

Item {
    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    // Focused Gallery routes: keep only the selected API and its prerequisites.
    id: featureStory

    Column {
        spacing: 24
        SyToast { id: toaster; duration: 0 }
        Flow {
            width: 520
            spacing: 8
            SyButton { id: exampleControl1;  visible: true; text: "toaster.createToast(\"warning\", …)"; variant: "secondary"; size: "small"; onClicked: toaster.createToast("warning", { header: "Heads up", body: "Your session ends in 5 minutes.", closable: true }) }
            SyButton { id: exampleControl2;  visible: true; text: "toaster.closeToast(…)"; variant: "secondary"; size: "small"; onClicked: toaster.closeToast(toaster.toasts[toaster.toasts.length - 1]) }
            SyButton { id: exampleControl3;  visible: true; text: "toaster.closeAll()"; variant: "secondary"; size: "small"; onClicked: toaster.closeAll() }
        }
        Text {
            text: "toaster.toasts.length === " + toaster.toasts.length
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
    }
}

05 Persistent notice

Persistent notice, configured with duration, closable.

Qt capture · image
Persistent notice · Notification
QML code
import QtQuick
import Syidax.Core

Item {
    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    property QtObject settings: QtObject {
        id: storyArgs
        property string position: "bottomRight"
        property bool closable: true
        property int duration: 0
        property bool latestTop: false
        property string animation: "fade"
    }

    readonly property string optionText: "{ header: " + JSON.stringify("Saved") + ", body: " + JSON.stringify("Your changes are in.") + (storyArgs.closable ? ", closable: true" : "") + (storyArgs.position !== "bottomRight" ? ", position: " + JSON.stringify(storyArgs.position) : "") + " }"

    Column {
        spacing: 12
        SyToast {
            id: toaster
            duration: storyArgs.duration
            latestTop: storyArgs.latestTop
            animation: storyArgs.animation
        }
        Row {
            spacing: 8
            SyButton { id: exampleControl1;  text: "Saved"; onClicked: toaster.createSuccessToast({ header: "Saved", body: "Your changes are in.", closable: storyArgs.closable, position: storyArgs.position }) }
            SyButton { text: "Failed"; onClicked: toaster.createErrorToast({ header: "Failed", body: "The server did not answer.", closable: storyArgs.closable, position: storyArgs.position }) }
            SyButton { text: "Update"; onClicked: toaster.createInfoToast({ header: "Update", body: "A new version is ready.", closable: storyArgs.closable, position: storyArgs.position }) }
            SyButton { text: "Heads up"; onClicked: toaster.createWarningToast({ header: "Heads up", body: "Your session ends in 5 minutes.", closable: storyArgs.closable, position: storyArgs.position }) }
            SyButton { text: "Note"; onClicked: toaster.createNeutralToast({ header: "Note", body: "Nothing else to do.", closable: storyArgs.closable, position: storyArgs.position }) }
        }
        Text {
            text: "toaster.toasts.length === " + toaster.toasts.length
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
    }

}

06 Newest notice first

Newest notice first, configured with position, latestTop.

Qt capture · image
Newest notice first · Notification
QML code
import QtQuick
import Syidax.Core

Item {
    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    property QtObject settings: QtObject {
        id: storyArgs
        property string position: "topRight"
        property bool closable: true
        property int duration: 3000
        property bool latestTop: true
        property string animation: "fade"
    }

    readonly property string optionText: "{ header: " + JSON.stringify("Saved") + ", body: " + JSON.stringify("Your changes are in.") + (storyArgs.closable ? ", closable: true" : "") + (storyArgs.position !== "bottomRight" ? ", position: " + JSON.stringify(storyArgs.position) : "") + " }"

    Column {
        spacing: 12
        SyToast {
            id: toaster
            duration: storyArgs.duration
            latestTop: storyArgs.latestTop
            animation: storyArgs.animation
        }
        Row {
            spacing: 8
            SyButton { id: exampleControl1;  text: "Saved"; onClicked: toaster.createSuccessToast({ header: "Saved", body: "Your changes are in.", closable: storyArgs.closable, position: storyArgs.position }) }
            SyButton { text: "Failed"; onClicked: toaster.createErrorToast({ header: "Failed", body: "The server did not answer.", closable: storyArgs.closable, position: storyArgs.position }) }
            SyButton { text: "Update"; onClicked: toaster.createInfoToast({ header: "Update", body: "A new version is ready.", closable: storyArgs.closable, position: storyArgs.position }) }
            SyButton { text: "Heads up"; onClicked: toaster.createWarningToast({ header: "Heads up", body: "Your session ends in 5 minutes.", closable: storyArgs.closable, position: storyArgs.position }) }
            SyButton { text: "Note"; onClicked: toaster.createNeutralToast({ header: "Note", body: "Nothing else to do.", closable: storyArgs.closable, position: storyArgs.position }) }
        }
        Text {
            text: "toaster.toasts.length === " + toaster.toasts.length
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
    }

}

API 70

Hover or select an item for its QML example and copy button.

Properties · SyToast (the host)

PropertyTypeDefaultDescription
int3000Default duration (ms) of made toasts; 0 = they stay.
boolfalseMade toasts get this latestTop: newest nearest the corner.
string"none"Default animation of made toasts: "none" · "fade" · "slide" / "slide-…".
string"fast"Default speed: "x-fast" · "fast" · "medium" · "slow" · "x-slow".
var[]The made items still open, in creation order (newest last). Hand-declared items are not in it.

Properties · SyToastItem (the card)

PropertyTypeDefaultDescription
list (default property)—Items under the message, in a column.
list—Items drawn in the 24 × 24 px icon box; the way to give a neutral toast an icon.
list—Items in a row under the content (16 px above it).
string""The 16 px header line; hidden when empty.
string""The 14 px body; hidden when empty.
boolfalsetrue presents the card, false dismisses it.
string"bottomRight""bottomRight" · "bottomLeft" · "topRight" · "topLeft" — the corner.
string"neutral""neutral" · "success" · "error" · "info" · "warning" — colors and icon.
boolfalseAdds the × that calls close().
int0Milliseconds until it closes itself; 0 = stays. Paused while hovered, restarted in full on leave.
boolfalseNewest nearest the corner — applies to the whole corner once any item there sets it.
string"none"Entrance animation and speed (see Behavior).
string"fast"Entrance animation and speed (see Behavior).
boolfalseDestroy the item after it closes; SyToast sets it on made toasts.
real0Distance from the corner along the edge; written by ToastStack.
bool (read-only)—The card is on screen (true from present until the exit finished).
real (read-only)—The card's current height.
bool (read-only)—Which edges the corner touches.
bool (read-only)—Which edges the corner touches.
int (read-only)—The resolved animation duration (0 for "none" or reduced motion).
read-only—The theme colors and icon for variant.
read-only—The theme colors and icon for variant.
read-only—The theme colors and icon for variant.
read-only—The theme colors and icon for variant.
read-only—The theme colors and icon for variant.

Properties · ToastStack (singleton)

PropertyTypeDefaultDescription
var[]Every open SyToastItem in the window, from every host and hand-declared, in show order.

Methods

MethodDescription
Makes, shows and returns a SyToastItem. variant: "success" · "error" · "info" · "warning" · "neutral". option (all fields optional, may be omitted): header, body, footer (text), icon (url), position, closable, duration, animation, animationSpeed.
createToast with the variant filled in; same option, same return.
createToast with the variant filled in; same option, same return.
createToast with the variant filled in; same option, same return.
createToast with the variant filled in; same option, same return.
createToast with the variant filled in; same option, same return.
Closes that item (item.close()); null / undefined is ignored. Works for any SyToastItem, not only this host's.
Closes every open item this host made.
Set open to true / false.
Set open to true / false.
Register, unregister and re-stack; items call these themselves — you only need layout() after changing latestTop on open items.
Register, unregister and re-stack; items call these themselves — you only need layout() after changing latestTop on open items.
Register, unregister and re-stack; items call these themselves — you only need layout() after changing latestTop on open items.

Signals

SignalArgumentsWhen
item: SyToastItem — the item just madeAfter a create*Toast call made and showed the item. Not for hand-declared items.
—The card is gone: after the ×, the clock, close(), closeToast / closeAll or open = false, and after the exit fade. Not emitted if the item was never shown. A made item is destroyed right after.

Behavior

ItemBehavior / conditions
Makes, shows and returns a SyToastItem. variant: "success" · "error" · "info" · "warning" · "neutral". option (all fields optional, may be omitted): header, body, footer (text), icon (url), position, closable, duration, animation, animationSpeed.
The 16 px header line; hidden when empty.
The 14 px body; hidden when empty.
"bottomRight" · "bottomLeft" · "topRight" · "topLeft" — the corner.
Adds the × that calls close().
Milliseconds until it closes itself; 0 = stays. Paused while hovered, restarted in full on leave.
Making a toast — createToast(variant, option) creates a SyToastItem as a child of the host with title = option.header, message = option.body, position = option.position (or "bottomRight" — the host has no position default), closable = option.closable === true, duration / animation / animationSpeed from the option or else from the host, latestTop always from the host, and disposable: true.
Making a toast — createToast(variant, option) creates a SyToastItem as a child of the host with title = option.header, message = option.body, position = option.position (or "bottomRight" — the host has no position default), closable = option.closable === true, duration / animation / animationSpeed from the option or else from the host, latestTop always from the host, and disposable: true.
Newest nearest the corner — applies to the whole corner once any item there sets it.
Destroy the item after it closes; SyToast sets it on made toasts.
The made items still open, in creation order (newest last). Hand-declared items are not in it.
After a create*Toast call made and showed the item. Not for hand-declared items.
Closes that item (item.close()); null / undefined is ignored. Works for any SyToastItem, not only this host's.
Closes every open item this host made.
The card is gone: after the ×, the clock, close(), closeToast / closeAll or open = false, and after the exit fade. Not emitted if the item was never shown. A made item is destroyed right after.
true presents the card, false dismisses it.
open — on a SyToastItem, open: true presents the card and false dismisses it; show() / close() set it.
open — on a SyToastItem, open: true presents the card and false dismisses it; show() / close() set it.
a 300 px wide panel in the window overlay (above everything), 16 px from the two edges of its corner, offset along the edge by the stack. The item itself is invisible where it is declared, so positioners skip it.
Default duration (ms) of made toasts; 0 = they stay.
Items drawn in the 24 × 24 px icon box; the way to give a neutral toast an icon.
Default speed: "x-fast" · "fast" · "medium" · "slow" · "x-slow".
icon box · column (title 16 px medium, message 14 px, declared content, footer row with 16 px above it) · × — 12 px padding, 8 px between the parts; title and message wrap.

Keyboard

ItemBehavior / conditions
SyInlineMessage for feedback on one control, SyBannerMessage for a persistent page-wide notice, SyModal for messages that need an answer, SyIcon / Icons.toast* for custom icons.