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: Invalid variant falls back to default: If the variant is bound to a dynamic value and resolves to something invalid, the alert uses the "default" (neutral) color scheme.

Alert — Examples

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 horizontal progress bar 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

Progress — Examples

Frequently Asked Questions

How do I show the Loader only while my data is fetching?

Bind the Loader's Visibility condition to the data source's loading state, for example {{ myQuery.isLoading }}. Place the Loader and the content block in the same container; when isLoading is true the Loader is visible and the content block can be hidden (set its own Visibility to {{ !myQuery.isLoading }}). This creates a clean swap between skeleton/spinner and real content.

The CONTENT (skeleton) Loader doesn't match my layout. How do I size it?

The skeleton inherits the Loader block's dimensions, not the content it is replacing. Set explicit width and height on the Loader block (or its parent container) to match the element you are loading. You can also set Content Style to dashed to show borders around each skeleton segment, which helps while positioning.

Can the Alert block's link navigate to an internal page?

The Alert's Link URL field accepts any URL including relative paths to internal pages (e.g., /orders/{{ orderId }}). Opening in a new tab is not built into Alert — the link always opens in the current window. If you need more control (new tab, query params, onClick logic), use a Text or Link block inside a custom container instead of the Alert's built-in link.

How do I show a Progress bar that fills automatically over time?

Bind Value to a variable you update on a timer. Create a Page Variable (e.g., progressValue, default 0), add a Set Variable action triggered by a repeating timer event, and increment the variable each tick. Bind the Progress block's Value to {{ progressValue }}. Stop the timer when the variable reaches your Max value.

Related Blocks