Alert & Loader

This page covers three display blocks: Alert, Loader and Progress.

Alert Block

The Alert block shows a static callout banner — a title, an optional description (plain text or Markdown), an optional icon, and an optional link button — colored by one of five variants. It is display-only: it announces something on the page rather than reacting to user clicks.

Note: Use Alert for persistent, in-page notices that stay visible until the page changes (warnings, success confirmations, setup notices). For transient messages that appear and disappear after an action, use a notification action instead — not a block.

Alert Variants

Alert — Content Properties

Alert — Appearance Properties

Alert — Exposed State

Alert Behaviors & Gotchas

Warning: Link Text without Link URL shows nothing: The link button only appears when Link URL has a value. Setting Link Text alone is ignored. When Link URL is set but Link Text is empty, the raw URL becomes the button label.

Note: Markdown formatting only applies when both type and description are set: A description with Markdown syntax renders its symbols literally while Type = Plain Text.

Note: Only a missing variant falls back to default: If the variant is empty or bound to a value that isn't one of the five (for example "info" or "danger"), the alert renders as an uncoloured bordered box. Make sure a dynamic binding always resolves to brand, default, error, warning or success.

Loader Block

The Loader block is a loading indicator in three styles: Default (a spinning arc), AI (the animated AI sparkle used in copilot surfaces), and Content (a skeleton placeholder with shimmering bars or a single shimmering box). It has no data or events — you show and hide it with visibility conditions while something else loads.

Warning: The Loader never hides itself. It has no built-in link to any loading state — it spins/shimmers forever until you hide it. Bind its Visibility to the thing that's actually loading (e.g., show while {{ ds_orders.isLoading }} is true).

Loader Types

Loader — Appearance Properties

Loader Behaviors & Gotchas

Note: AI type ignores Size: The AI sparkle always renders at one fixed small size (24×24 px). To make it bigger, there is no setting — choose a different type or scale the surrounding layout.

Note: Dashed skeleton needs a real height: The Content type computes how many shimmer bars fit from the block's actual height (~1 bar per 28 px). If the block has no height, the skeleton renders empty. Give it an explicit height or place it where the layout stretches it.

Note: Last skeleton bar is always shorter: In dashed style, the final row renders at 70% width to mimic a trailing line of text. This is fixed — not configurable.

Note: Skeleton color follows the Styles Color: For Content type, the Color style drives the shimmer's base color (supports theme color tokens).

Progress Block

The Progress block renders a progress indicator — a bar, a gauge or a circle — showing a value between a minimum and maximum. It can display a text label and supports conditional styling. Use it for upload progress, task completion percentages, quota usage, and similar numeric-range indicators.

Progress — Key Properties

Related Blocks

Blocks to use with, or instead of, the Alert: