Layout and media

Action button

Add an action-button panel when readers need one obvious next step on the page: open another page or apply a preset filter. An export action declares and renders today; its click dispatches later.

What you can do

  • style is the visible surface: label (required, 1 to 120 characters), a variant preset (primary, secondary, ghost, outline) and a size preset (sm, md, lg); raw siblings background, color, borderColor, fontSize, paddingX, paddingY, radius, and fontWeight win over the preset when set.
  • icon names one of six inline SVGs (download, arrow-right, external-link, filter, filter-off, refresh); iconText renders any glyph of up to four characters verbatim and wins over icon; iconPosition is start or end.
  • action is discriminated by kind: navigate opens a page id or a literal https:// url (with target _self or _blank); filter applies set values and/or clear params through the same targets scope ladder a filter control uses; exportPage and exportAll request a workbook (format xlsx, or csv for a single page); python runs author-written Python on the panel's Snowflake source on click and delivers its result as a download, a toast, or a page refresh (an omitted result defaults to toast) — it takes the same code, params, and packages as a python block plus an optional confirm prompt, and needs data.sourceId and the python:author capability to author.
  • navigate, filter, and python buttons dispatch on click today; exportPage and exportAll buttons validate and render but a click does nothing yet.
  • align (start, center, end), offset, and width (auto, full, or a pixel value from 24 to 4096) place the button in its slot; an action-button accepts no onClick, and carries a data block only when its action is python (the Snowflake sourceId the code runs against).

Applies to an action-button panel in view, edit, and Present modes and in static renders; only navigate, filter, and python actions dispatch on click, and an external url shows its host beside the label before it opens. The primary fill normally takes the theme token chart.series.1 (falling back to accent when that token cannot reach 3.0:1 contrast on the panel background), and the label colour is chosen to stay legible on it.

Spec

View spec
{
  "id": "go-details",
  "type": "action-button",
  "title": "",
  "spec": {
    "style": {
      "label": "Open the details page",
      "variant": "primary",
      "icon": "arrow-right",
      "iconPosition": "end"
    },
    "action": {
      "kind": "navigate",
      "page": "details"
    },
    "align": "start"
  }
}

A primary button whose label is followed by an arrow icon, aligned to the start of its slot, that opens the dashboard page whose id is details on click.

Build it in dvt

Every block on this page is a few lines of the same declarative JSON spec. Read the full spec format, or connect an AI agent to your warehouse and build one live in the quickstart.

Follow the build

dvt is in founding research. Leave your email and we'll reach out when there's something to see — no newsletters, no noise.

No spam. We use this to reach out directly, nothing else.