Skip to content

Feedback & Overlays

These components provide feedback to the user, such as notifications, loading states, and interactive overlays.

Notifications

Alert

Immediate, prominent feedback often displayed inline or at the top of a page.

Parameters for alert
Parameter Type Description
content any Message shown to the user
dismissible bool Whether the alert can be dismissed by the user
style str Visual style of the alert, either "danger", "warning", "success" or "info"

Toast

Brief, self-dismissing messages typically shown in the corner of the screen.

Parameters for toast_stack
Parameter Type Description
content any Collection of toast notifications
position str Position of the toast stack on the screen, either "top-right", "top-left", "bottom-right" or "bottom-left"
Parameters for toast
Parameter Type Description
content any Message shown in the toast notification
title str Optional title shown in the toast notification
style str Visual style of the toast, either "danger", "warning", "success" or "info"
dismissible bool Whether the toast can be dismissed by the user

Overlays

Dialog boxes that appear on top of the page content.

Example

{%- set modal_id = ui.util.id() -%}
{{ ui.modal_handle(_("Open Modal"), id=modal_id) }}

{%- call ui.util.call(ui.modal, title=_("Example Modal"), id=modal_id) -%}
    <p>Modal content goes here.</p>
    {%- call ui.util.call(ui.form_actions) -%}
        {{ ui.modal_close_handle(_("Close"), id=modal_id) }}
    {%- endcall -%}
{%- endcall -%}
Parameters for modal
Parameter Type Description
content any Content of the modal dialog
title str Title shown in the modal header
footer any Content shown in the modal footer. May contain button or other control elements.
dismissible bool Whether the modal can be dismissed by the user by clicking outside the modal or pressing the escape key.
id str Unique identifier for the modal, used to target it with a modal_handle.
Parameters for confirm_modal
Parameter Type Description
content any Content of the modal dialog, typically describing the action to be confirmed
title str Title shown in the modal header
id str Unique identifier for the modal, used to target it with a modal_handle.
cancel_label str Label of the cancel button
confirm_label str Label of the confirm button
href str URL to send POST request to when user confirms the action. Has no effect when form_id is specified.
form_id str ID of the form to submit when user confirms the action. If not specified, empty form will be submitted.
dismissible bool Whether the modal can be dismissed by the user by clicking outside the modal or pressing the escape key.
Parameters for modal_handle
Parameter Type Description
content any Label or icon for the handle
id str Unique identifier of the modal to show when this handle is triggered
Parameters for modal_close_handle
Parameter Type Description
content any Label or icon for the close handle
id str Unique identifier of the modal to close when this handle is triggered

Popover

Small overlays that appear near a trigger element, often on click.

Parameters for popover
Parameter Type Description
content any Content of the popover, shown when the popover is triggered
title str Title shown in the popover header
id str Unique identifier for the popover, used to target it with a popover_handle.
Parameters for popover_handle
Parameter Type Description
content any Label or icon for the handle
id str Unique identifier of the popover to toggle when this handle is triggered

Tooltip

Brief informational text that appears on hover or focus.

Parameters for tooltip
Parameter Type Description
content any Content that has tooltip
tooltip str Message shown in the tooltip
position str Position of the tooltip relative to the content, either "top", "right", "bottom" or "left"

Loading States

Spinner

Animated icon indicating that an action is in progress.

Parameters for spinner
Parameter Type Description
content any Spinner content, typically shown as a label next to the spinner icon

Progress

Visual indicator of progress for long-running tasks.

Parameters for progress
Parameter Type Description
content any Progress bar content, typically shown as a label inside the progress bar
value int Current progress value, between 0 and max
max int Maximum progress value, default is 100