The toast component

Displays a brief notification above the page. Each top-level toast row creates one notification, and consecutive toasts at the same position are queued in a shared stack.

Ordinary notifications use role="status" and aria-live="polite". Colored variants retain a readable contrasting foreground. Automatic dismissal and the manual close control are configured independently.

Introduced in SQLPage v0.46.0.

Top-level parameters

name required type description
class

TEXT

 Optional custom CSS class appended to the toast.
color

COLOR

 Optional Tabler color. The default is the neutral toast appearance; colored variants use the matching contrasting foreground utility.
description

TEXT

 Escaped plain-text body. This is used only when `description_md` is not supplied.
description_md

TEXT

 Rich-text alternative to `description`, rendered as Markdown. When both properties are supplied, `description_md` takes precedence.
dismissible

BOOLEAN

 Whether to render an accessible manual close button. Defaults to true and is independent of automatic dismissal.
duration

INTEGER

 Automatic dismissal delay in milliseconds. Defaults to 5000. Set to 0 to keep the toast visible until manually dismissed (when `dismissible` is true) or the page is left.
icon

ICON

 Optional [Tabler icon](https://tabler.io/icons) name.
id

TEXT

 Optional stable HTML ID for the toast.
position

TEXT

 Screen placement: `top-start`, `top-center`, `top-end`, `bottom-start`, `bottom-center`, or `bottom-end`. Defaults to `top-end`; invalid values safely fall back to that default.
title

TEXT

 Optional notification heading.
trigger

TEXT

 Optional URL fragment that opens the toast without reloading the page, with or without the leading `#`. When set, the toast does not open on page load and can be opened repeatedly by a link or button whose target is that fragment. Multiple toasts can share a trigger to open as a stack.
No data

Example 1

A toast that opens when the page loads and disappears automatically after the default 5000 milliseconds.

select 
    'toast'                   as component,
    'toast-auto'              as id,
    'This is a SQLPage toast' as title,
    'This toast will open automatically when the page loads.' as description,
    'check'                   as icon,
    'green'                   as color;

Result

Example 2

A persistent error notification that disables automatic dismissal and requires the user to activate its close button.

select 
    'toast'             as component,
    'toast-dismissible' as id,
    'persistent-error'  as trigger,
    'Could not save'    as title,
    'Review the highlighted fields and try again.' as description,
    'alert-triangle'    as icon,
    'black'             as color,
    0                   as duration,
    TRUE                as dismissible;
select 
    'toast'                  as component,
    'toast-nondismissible'   as id,
    'persistent-status'      as trigger,
    'Connection unavailable' as title,
    'This persistent notification has no manual close control.' as description,
    0                        as duration,
    FALSE                    as dismissible;
select 
    'button' as component;
select 
    'Show dismissible error' as title,
    '#persistent-error'      as link,
    'red'                    as color;
select 
    'Show non-dismissible status' as title,
    '#persistent-status'          as link;

Result

Show dismissible error Show non-dismissible status

Example 3

A persistent rich Markdown notification. Markdown takes precedence over plain text and renders emphasis and a link as HTML, while plain-text content remains escaped.

select 
    'toast'              as component,
    'toast-markdown'     as id,
    'rich-notifications' as trigger,
    'Release available'  as title,
    '<strong>This fallback stays escaped</strong>' as description,
    'Version **2.0** is ready. [Read the notes](https://example.com/releases).' as description_md,
    'blue'               as color,
    0                    as duration;
select 
    'toast'              as component,
    'toast-plain'        as id,
    'rich-notifications' as trigger,
    '<strong>Plain text stays escaped</strong>' as description,
    'white'              as color,
    0                    as duration;
select 
    'button' as component;
select 
    'Show rich notifications' as title,
    '#rich-notifications'     as link;

Result

Show rich notifications

Example 4

Several persistent queued notifications. Toasts with the same position share a container and stack instead of overlapping.

select 
    'toast'                as component,
    'toast-stack-one'      as id,
    'queued notifications' as trigger,
    'Import started'       as title,
    'Preparing records.'   as description,
    0                      as duration;
select 
    'toast'                as component,
    'toast-stack-two'      as id,
    'queued notifications' as trigger,
    'Import running'       as title,
    'Processing records.'  as description,
    0                      as duration;
select 
    'toast'                as component,
    'toast-short'          as id,
    'queued notifications' as trigger,
    'Temporary update'     as title,
    'This message closes shortly.' as description,
    2000                   as duration;
select 
    'button' as component;
select 
    'Show queued notifications' as title,
    '#queued notifications'     as link;

Result

Show queued notifications

Example 5

A notification placed at the bottom center of the screen instead of the default top end.

select 
    'toast'                 as component,
    'toast-bottom-center'   as id,
    'bottom-notification'   as trigger,
    'Download ready'        as title,
    'Your export is ready.' as description,
    'bottom-center'         as position,
    0                       as duration;
select 
    'button' as component;
select 
    'Show bottom notification' as title,
    '#bottom-notification'     as link;

Result

Show bottom notification

See also: other components

alert authentication big_number breadcrumb button card carousel chart code columns cookie csv datagrid debug divider download dynamic empty_state foldable form hero html http_header json list log login map modal pagination redirect rss shell status_code steps tab table text timeline title toast tracking