Component vocabulary

Intrinsic components the model can emit through the present tool, rendered through the elements theme.

Layout

8 elements

Card

A module the reader scans or acts on, such as a summary, a checklist, a form, or one option in a comparison. It renders as a panel, so keep plain sections (a Header with Text or Markdown) outside cards, and do not wrap the whole answer in one card or nest cards. It takes on a framed surface when background is set, when confirm/cancel add a footer, or when it is a slot in a Carousel. Set asForm to collect named child control values on submit.

Order summary

Two items ready for checkout.

Total: $48.00

{
  "_type": "Card",
  "title": "Order summary",
  "children": [
    {
      "_type": "Text",
      "value": "Two items ready for checkout.",
      "size": "sm",
      "color": "secondary"
    },
    {
      "_type": "Fact",
      "label": "Total",
      "value": "$48.00"
    }
  ]
}

title?string | number: Optional card title text or number.
padding?number: Padding in 4px units (e.g. 2 = 8px). 0 to 8 is the supported range.
background?string: Background color or gradient. Resource-loading functions and CSS escapes are ignored. Setting this also switches the card's own text to white, since a custom background makes the card a tinted surface; children can still opt into a different color explicitly.
asForm?boolean: Render as a form; submitting it fires confirm._action, or the Card's own _action when confirm has none, with every named child control's value keyed by name.
confirm?object: Confirm button shown in the footer.
cancel?object: Cancel button shown in the footer.

Row

A horizontal row; children laid out left to right.

In stockFree shippingShips today

{
  "_type": "Row",
  "gap": 2,
  "align": "center",
  "children": [
    {
      "_type": "Badge",
      "value": "In stock",
      "variant": "success"
    },
    {
      "_type": "Badge",
      "value": "Free shipping",
      "variant": "info"
    },
    {
      "_type": "Text",
      "value": "Ships today",
      "size": "sm",
      "color": "secondary"
    }
  ]
}

gap?number: Gap between children in 4px units. 0 to 8 is the supported range.
align?"start" | "center" | "end": Cross-axis alignment.
justify?"start" | "center" | "end" | "between": Main-axis distribution.

Col

A vertical stack; children laid out top to bottom.

Shipping address

142 Market StreetSan Francisco, CA 94105

{
  "_type": "Col",
  "gap": 2,
  "children": [
    {
      "_type": "Header",
      "text": "Shipping address",
      "size": "md"
    },
    {
      "_type": "Text",
      "value": "142 Market Street",
      "size": "sm"
    },
    {
      "_type": "Text",
      "value": "San Francisco, CA 94105",
      "size": "sm"
    }
  ]
}

gap?number: Gap between children in 4px units. 0 to 8 is the supported range.
align?"start" | "center" | "end": Cross-axis alignment.

Box

A generic container for composition, e.g. a progress bar built from an outer track Box containing a partial-width fill Box. Size and radius accept arbitrary values; background accepts colors and gradients. These render as inline styles rather than data-attribute hooks.

{
  "_type": "Box",
  "width": "100%",
  "height": 8,
  "radius": "full",
  "background": "rgba(59, 130, 246, 0.2)",
  "children": {
    "_type": "Box",
    "width": "62%",
    "height": 8,
    "radius": "full",
    "background": "#3b82f6"
  }
}

width?string | number: Width; a number is pixels.
height?string | number: Height; a number is pixels.
radius?"full": Corner radius; "full" is a pill/circle, a number is pixels.
background?string: Background color or gradient. Resource-loading functions and CSS escapes are ignored.

Spacer

Empty space that pushes neighbors apart.

Subtotal

$36.00

{
  "_type": "Row",
  "align": "center",
  "children": [
    {
      "_type": "Text",
      "value": "Subtotal",
      "size": "sm"
    },
    {
      "_type": "Spacer"
    },
    {
      "_type": "Text",
      "value": "$36.00",
      "weight": "medium"
    }
  ]
}

Divider

A horizontal rule between sections.

Account settings

Manage how we notify you about activity.

{
  "_type": "Col",
  "gap": 3,
  "children": [
    {
      "_type": "Text",
      "value": "Account settings",
      "weight": "medium"
    },
    {
      "_type": "Divider"
    },
    {
      "_type": "Text",
      "value": "Manage how we notify you about activity.",
      "size": "sm",
      "color": "secondary"
    }
  ]
}

flush?boolean: Whether the divider spans the full width with no inset.

Carousel

A horizontally scrollable group of Card children (max 10). Set label for an accessible name.

Riverside loft

$186 / night · 2 guests

Hillside cabin

$142 / night · 4 guests

Harbor suite

$210 / night · 2 guests

{
  "_type": "Carousel",
  "label": "Featured stays",
  "children": [
    {
      "_type": "Card",
      "title": "Riverside loft",
      "children": {
        "_type": "Text",
        "value": "$186 / night · 2 guests",
        "size": "sm",
        "color": "secondary"
      }
    },
    {
      "_type": "Card",
      "title": "Hillside cabin",
      "children": {
        "_type": "Text",
        "value": "$142 / night · 4 guests",
        "size": "sm",
        "color": "secondary"
      }
    },
    {
      "_type": "Card",
      "title": "Harbor suite",
      "children": {
        "_type": "Text",
        "value": "$210 / night · 2 guests",
        "size": "sm",
        "color": "secondary"
      }
    }
  ]
}

label?string: Accessible label for the carousel.

Tabs

Panels the user switches between with tabs, one visible at a time. Use it for parallel content the user looks at one part at a time, such as options, plans, or days. Each child is one panel, usually a Col, labeled by the matching entry in tabs.

Price: $0

One project, community support.

{
  "_type": "Tabs",
  "tabs": [
    "Starter",
    "Pro",
    "Team"
  ],
  "children": [
    {
      "_type": "Col",
      "gap": 1,
      "children": [
        {
          "_type": "Fact",
          "label": "Price",
          "value": "$0"
        },
        {
          "_type": "Caption",
          "value": "One project, community support."
        }
      ]
    },
    {
      "_type": "Col",
      "gap": 1,
      "children": [
        {
          "_type": "Fact",
          "label": "Price",
          "value": "$20 / month"
        },
        {
          "_type": "Caption",
          "value": "Unlimited projects, email support."
        }
      ]
    },
    {
      "_type": "Col",
      "gap": 1,
      "children": [
        {
          "_type": "Fact",
          "label": "Price",
          "value": "$15 / seat / month"
        },
        {
          "_type": "Caption",
          "value": "Shared workspaces and SSO."
        }
      ]
    }
  ]
}

tabsstring | number[]: Tab labels as text or numbers, one per child panel, in order.
label?string | number: Accessible name as text or a number for the row of tabs.

Typography

4 elements

Header

A section heading. Renders as a bold title.

Weekly digest

{
  "_type": "Header",
  "text": "Weekly digest",
  "size": "xl"
}

textstring | number: The heading text or number.
size?"sm" | "md" | "lg" | "xl" | "2xl" | "3xl": Heading size; defaults to lg.

Text

A run of text. Use for paragraphs, labels, or inline copy.

Primary body copy at the default size.Emphasized supporting line.

{
  "_type": "Col",
  "gap": 2,
  "children": [
    {
      "_type": "Text",
      "value": "Primary body copy at the default size.",
      "size": "md",
      "weight": "normal"
    },
    {
      "_type": "Text",
      "value": "Emphasized supporting line.",
      "size": "sm",
      "weight": "semibold",
      "color": "secondary"
    }
  ]
}

valuestring | number: The text or number to display.
size?"sm" | "md" | "lg" | "xl" | "2xl" | "3xl": Text size; defaults to md.
weight?"normal" | "medium" | "semibold" | "bold": Font weight.
color?"emphasis" | "secondary" | "alpha-70" | "white" | "white-70" | "white-50": Foreground color token.

Caption

Secondary, de-emphasized text under a primary element.

Last updated 2 hours ago

{
  "_type": "Caption",
  "value": "Last updated 2 hours ago"
}

valuestring | number: The caption text or number.

Markdown

A markdown string. Rendered as-is by default; override this component for a full markdown renderer.

Refund approved. Your card ending in 4242 will be credited within 3 to 5 business days.

{
  "_type": "Markdown",
  "value": "**Refund approved.** Your card ending in 4242 will be credited within **3 to 5 business days**."
}

valuestring: Markdown source.

Data

5 elements

Fact

A label/value pair, rendered as a key followed by its value. Use for compact metadata, and put an answer's key figures side by side in a Row.

Status: Shipped

{
  "_type": "Fact",
  "label": "Status",
  "value": "Shipped"
}

labelstring | number: The fact label (key) as text or a number.
valuestring | number: The fact value as text or a number.
delta?string: Change from before.
trend?"up" | "down" | "flat": Change direction.
upIsGood?boolean: Whether up is good.

Table

Tabular data. Provide columns and rows; each row is an array of cells matching the columns.

Symbol	Shares	Price	Value
ACME	40	$182.10	$7,284.00
GLBX	25	$94.55	$2,363.75
NORT	15	$310.20	$4,653.00

{
  "_type": "Table",
  "columns": [
    {
      "label": "Symbol"
    },
    {
      "label": "Shares"
    },
    {
      "label": "Price"
    },
    {
      "label": "Value"
    }
  ],
  "rows": [
    [
      "ACME",
      40,
      "$182.10",
      "$7,284.00"
    ],
    [
      "GLBX",
      25,
      "$94.55",
      "$2,363.75"
    ],
    [
      "NORT",
      15,
      "$310.20",
      "$4,653.00"
    ]
  ]
}

columns?object[]: Column definitions.
rows?string | number | boolean[][]: Rows of cells.
sortable?boolean: Allow header sorting.

Chart

A chart. variant selects bar, line, sparkline, or area rendering. Provide data for a single series, or series for multiple named series (series takes precedence over data when both are present). Set stacked to accumulate series values instead of overlaying them, and showAxis/showLegend to add y-axis ticks, x-axis point labels, and a legend.

100

EmailChatPhone

{
  "_type": "Chart",
  "variant": "bar",
  "stacked": true,
  "showAxis": true,
  "showLegend": true,
  "series": [
    {
      "label": "Email",
      "data": [
        {
          "label": "W1",
          "value": 42
        },
        {
          "label": "W2",
          "value": 38
        },
        {
          "label": "W3",
          "value": 51
        },
        {
          "label": "W4",
          "value": 35
        }
      ]
    },
    {
      "label": "Chat",
      "data": [
        {
          "label": "W1",
          "value": 28
        },
        {
          "label": "W2",
          "value": 33
        },
        {
          "label": "W3",
          "value": 25
        },
        {
          "label": "W4",
          "value": 40
        }
      ]
    },
    {
      "label": "Phone",
      "data": [
        {
          "label": "W1",
          "value": 12
        },
        {
          "label": "W2",
          "value": 9
        },
        {
          "label": "W3",
          "value": 15
        },
        {
          "label": "W4",
          "value": 11
        }
      ]
    }
  ]
}

variant"bar" | "line" | "sparkline" | "area": Chart variant.
data?object[]: Data points for a single series.
series?object[]: Multiple named series; takes precedence over data when present.
stacked?boolean: Accumulate series values instead of overlaying them (bar and area variants; ignored for line and sparkline).
showAxis?boolean: Show y-axis ticks and x-axis point labels.
showLegend?boolean: Show a legend mapping each series to its color.
color?string: Series color (single-series mode only). One of emphasis, secondary, alpha-70, white, white-70, or white-50, matching Text's color tokens; other values have no visual effect.

Badge

A small labeled tag, e.g. for status or category.

DefaultSecondaryInfoSuccessWarning

{
  "_type": "Row",
  "gap": 2,
  "children": [
    {
      "_type": "Badge",
      "value": "Default"
    },
    {
      "_type": "Badge",
      "value": "Secondary",
      "variant": "secondary"
    },
    {
      "_type": "Badge",
      "value": "Info",
      "variant": "info"
    },
    {
      "_type": "Badge",
      "value": "Success",
      "variant": "success"
    },
    {
      "_type": "Badge",
      "value": "Warning",
      "variant": "warning"
    }
  ]
}

valuestring | number: Badge text or number.
variant?string: Visual variant token.

Citation

A source the answer draws on, shown as a card with its title and site that links to it. Use one per source.

parktool.com

Repair help

Find what caused the flat before you patch, or the new tube goes flat too.

{
  "_type": "Citation",
  "title": "Repair help",
  "url": "https://www.parktool.com/en-us/blog/repair-help/",
  "snippet": "Find what caused the flat before you patch, or the new tube goes flat too."
}

titlestring | number: The source's title as text or a number.
url?string: Link to the source; only http and https links open.
source?string | number: Where it comes from, such as a site or publication, as text or a number. Defaults to the link's domain.
snippet?string | number: A short quote or summary of what the source says, as text or a number.

Media

4 elements

Image

An image. Provide src and alt for accessibility. Put several images in a Row for a gallery, or a sm image beside text for a thumbnail.

Bright loft living room with large windows and a sofa

{
  "_type": "Image",
  "src": "https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?w=640&q=80",
  "alt": "Bright loft living room with large windows and a sofa",
  "size": "md"
}

srcstring: Image URL, taken from a tool result or the user; never invent one.
altstring: Alt text for accessibility.
size?"sm" | "md" | "lg": Size token or pixel value.
round?boolean: Render as a circular avatar (fully rounded, cropped to a square).

Icon

A small line icon from the built-in set. size controls the rendered pixel size.

{
  "_type": "Row",
  "gap": 4,
  "align": "center",
  "children": [
    {
      "_type": "Icon",
      "name": "sun",
      "size": "md"
    },
    {
      "_type": "Icon",
      "name": "plane",
      "size": "md"
    },
    {
      "_type": "Icon",
      "name": "map-pin",
      "size": "md"
    },
    {
      "_type": "Icon",
      "name": "credit-card",
      "size": "md"
    },
    {
      "_type": "Icon",
      "name": "bell",
      "size": "md"
    }
  ]
}

name"sun" | "moon" | "cloud" | "rain" | "snow" | "wind" | "play" | "pause" | "check" | "x" | "star" | "heart" | "arrow-right" | "arrow-up-right" | "chevron-right" | "calendar" | "clock" | "map-pin" | "plane" | "truck" | "credit-card" | "user" | "search" | "bell": Which built-in icon to render.
size?"sm" | "md" | "lg": Icon size; defaults to md (16px).

Built-in icon set

sun

moon

cloud

rain

snow

wind

play

pause

check

star

heart

arrow-right

arrow-up-right

chevron-right

calendar

clock

map-pin

plane

truck

credit-card

user

bell

Diagram

A diagram drawn from Mermaid source, such as a flowchart, a sequence of messages, or the states of a process. Keep it small and label the nodes in plain words.

Order flow

{
  "_type": "Diagram",
  "title": "Order flow",
  "code": "flowchart LR\n  A[Cart] --> B[Checkout]\n  B --> C{Paid?}\n  C -->|Yes| D[Ship]\n  C -->|No| B"
}

codestring: Mermaid source, such as flowchart LR followed by A[Order] --> B[Ship].
title?string | number: A caption for the diagram, as text or a number.

Map

Places on a map, such as the stops of a trip or locations to compare, with an optional route through them in order.

{
  "_type": "Map",
  "route": true,
  "places": [
    {
      "label": "San Francisco",
      "lat": 37.7749,
      "lng": -122.4194,
      "detail": "Start"
    },
    {
      "label": "Monterey",
      "lat": 36.6002,
      "lng": -121.8947,
      "detail": "Night 1"
    },
    {
      "label": "Big Sur",
      "lat": 36.2704,
      "lng": -121.8081,
      "detail": "Night 2"
    }
  ]
}

placesobject[]: The places, in order.
route?boolean: Draw a line through the places in order.

Controls

9 elements

Button

A clickable button. Carries _action describing the side effect or resume value. Set submit to submit an ancestor Form/Card instead of firing _action on click.

{
  "_type": "Row",
  "gap": 2,
  "children": [
    {
      "_type": "Button",
      "label": "Add to cart",
      "buttonStyle": "primary",
      "_action": {
        "type": "add_to_cart",
        "sku": "headphone-pro-1"
      }
    },
    {
      "_type": "Button",
      "label": "Save",
      "buttonStyle": "secondary",
      "_action": {
        "type": "save_item",
        "sku": "headphone-pro-1"
      }
    },
    {
      "_type": "Button",
      "label": "Details",
      "buttonStyle": "outline",
      "_action": {
        "type": "view_details",
        "sku": "headphone-pro-1"
      }
    },
    {
      "_type": "Button",
      "label": "Share",
      "buttonStyle": "ghost",
      "_action": {
        "type": "share_item",
        "sku": "headphone-pro-1"
      }
    },
    {
      "_type": "Button",
      "label": "Remove",
      "buttonStyle": "danger",
      "_action": {
        "type": "remove_item",
        "sku": "headphone-pro-1"
      }
    }
  ]
}

labelstring | number: Button label text or number.
buttonStyle?"primary" | "secondary" | "outline" | "ghost" | "danger": Visual style.
block?boolean: Whether the button spans the full width.
submit?boolean: Render as a submit button for an ancestor Form/Card instead of a click button.
undoable?boolean: Delay the action with an undo control, for sends and other hard-to-reverse actions.

Select

A dropdown selector. Carries _action describing the on-select behavior.

{
  "_type": "Select",
  "name": "partySize",
  "label": "Party size",
  "placeholder": "Select party size",
  "options": [
    {
      "label": "1 guest",
      "value": "1"
    },
    {
      "label": "2 guests",
      "value": "2"
    },
    {
      "label": "3 guests",
      "value": "3"
    },
    {
      "label": "4+ guests",
      "value": "4"
    }
  ],
  "_action": {
    "type": "set_party_size"
  }
}

optionsobject[]: Selectable options.
placeholder?string | number: Placeholder text or number shown when nothing is selected.
label?string: Accessible label for the control.
name?string: Field name used inside a Form.
defaultValue?string: Initially selected value.

Input

A text input. Carries _action describing the on-submit behavior.

{
  "_type": "Input",
  "name": "email",
  "label": "Email",
  "placeholder": "you@example.com",
  "_action": {
    "type": "submit_email"
  }
}

inputType?"text" | "password" | "number": Single-line input type. Values remain strings.
placeholder?string: Placeholder text.
multiline?boolean: Render a textarea instead of a single-line input; ignored when inputType is "password" or "number".
label?string: Accessible label for the control.
name?string: Field name used inside a Form.
defaultValue?string: Initial text.

DatePicker

A date, datetime, or time input. Carries _action, which runs once per committed value: a pick from the picker, or a typed value on blur or Enter.

{
  "_type": "DatePicker",
  "name": "checkIn",
  "label": "Check-in date",
  "value": "2026-07-15",
  "min": "2026-07-01",
  "max": "2026-12-31",
  "_action": {
    "type": "set_check_in"
  }
}

inputType?"date" | "datetime" | "time": Temporal input type. Defaults to "date". Values remain strings.
value?string: Initial value: YYYY-MM-DD for date, HH:mm or HH:mm:ss with optional fraction of at most 9 digits for time, YYYY-MM-DDTHH:mm with optional :ss and fraction of at most 9 digits for datetime. A datetime with Z or ±HH:mm is an instant, displayed in the viewer's time zone and submitted with the same offset and precision. A datetime without an offset is local and submitted unchanged. An empty datetime submits with the viewer's offset and seconds.
min?string: Minimum value: YYYY-MM-DD for date, HH:mm or HH:mm:ss with optional fraction of at most 9 digits for time, YYYY-MM-DDTHH:mm with optional :ss and fraction of at most 9 digits for datetime. Datetimes with Z or ±HH:mm are converted to the viewer's time zone.
max?string: Maximum value: YYYY-MM-DD for date, HH:mm or HH:mm:ss with optional fraction of at most 9 digits for time, YYYY-MM-DDTHH:mm with optional :ss and fraction of at most 9 digits for datetime. Datetimes with Z or ±HH:mm are converted to the viewer's time zone.
label?string: Accessible label for the control.
name?string: Field name used inside a Form.

Checkbox

A checkbox with a label. Carries _action describing the on-change behavior.

Send a reminder 1 hour before

{
  "_type": "Checkbox",
  "name": "reminder",
  "label": "Send a reminder 1 hour before",
  "defaultChecked": true,
  "_action": {
    "type": "toggle_reminder"
  }
}

labelstring | number: Label text or number next to the checkbox.
name?string: Field name used inside a Form.
defaultChecked?boolean: Whether the checkbox starts checked.
variant?"checkbox" | "switch": Whether to render a checkbox or switch.

Slider

A numeric range control. Carries _action describing the committed value.

Hold the table for15 min

{
  "_type": "Slider",
  "name": "holdMinutes",
  "label": "Hold the table for",
  "min": 5,
  "max": 30,
  "step": 5,
  "defaultValue": 15,
  "unit": "min",
  "_action": {
    "type": "set_table_hold"
  }
}

name?string: Field name used inside a Form.
label?string: Accessible label for the control.
minnumber: Minimum value.
maxnumber: Maximum value.
step?number: Value increment. Defaults to 1.
defaultValue?number: Initial value.
unit?string: Unit shown with the value.

RadioGroup

A group of mutually exclusive radio options. Carries _action describing the on-change behavior.

IndoorPatioBar

{
  "_type": "RadioGroup",
  "name": "seating",
  "label": "Seating preference",
  "defaultValue": "indoor",
  "options": [
    {
      "label": "Indoor",
      "value": "indoor"
    },
    {
      "label": "Patio",
      "value": "patio"
    },
    {
      "label": "Bar",
      "value": "bar"
    }
  ],
  "_action": {
    "type": "set_seating"
  }
}

optionsobject[]: Selectable options.
name?string: Field name used inside a Form.
label?string: Accessible name for the group.
defaultValue?string: Initially selected value.

CheckboxGroup

A group of checkbox options where any number can be checked. Set progress for a checklist the user works through. Carries _action describing the on-change behavior.

VegetarianGluten-freeNut allergy

{
  "_type": "CheckboxGroup",
  "name": "dietary",
  "label": "Dietary needs",
  "defaultValue": [
    "vegetarian"
  ],
  "options": [
    {
      "label": "Vegetarian",
      "value": "vegetarian"
    },
    {
      "label": "Gluten-free",
      "value": "gluten_free"
    },
    {
      "label": "Nut allergy",
      "value": "nut_allergy"
    }
  ],
  "_action": {
    "type": "set_dietary_needs"
  }
}

optionsobject[]: Selectable options.
name?string: Field name used inside a Form.
label?string: Accessible name for the group.
defaultValue?string[]: Initially checked values.
progress?boolean: Show how many options are checked, with a progress bar.

Form

Wraps named child controls (Select/Input/Checkbox/RadioGroup/CheckboxGroup/DatePicker with a name). Carries _action; on submit it fires with every named control's value, keyed by name.

{
  "_type": "Form",
  "gap": 3,
  "_action": {
    "type": "submit_newsletter"
  },
  "children": [
    {
      "_type": "Input",
      "name": "name",
      "label": "Name",
      "placeholder": "Full name"
    },
    {
      "_type": "Input",
      "name": "email",
      "label": "Email",
      "placeholder": "you@example.com"
    },
    {
      "_type": "Button",
      "label": "Subscribe",
      "buttonStyle": "primary",
      "submit": true
    }
  ]
}

gap?number: Gap between children in 4px units. 0 to 8 is the supported range.

Lists

4 elements

ListView

A vertical list container. Wrap ListViewItem children as rows.

Morning Light
Aria Sol
3:42
City After Rain
Northline
4:18
Quiet Hours
Lumen
2:55

{
  "_type": "ListView",
  "children": [
    {
      "_type": "ListViewItem",
      "_action": {
        "type": "play_track",
        "trackId": "t1"
      },
      "children": {
        "_type": "Row",
        "align": "center",
        "gap": 3,
        "children": [
          {
            "_type": "Image",
            "src": "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=640&q=80",
            "alt": "Over-ear headphones on a desk",
            "size": "sm",
            "round": true
          },
          {
            "_type": "Col",
            "gap": 0,
            "children": [
              {
                "_type": "Text",
                "value": "Morning Light",
                "weight": "medium"
              },
              {
                "_type": "Caption",
                "value": "Aria Sol"
              }
            ]
          },
          {
            "_type": "Spacer"
          },
          {
            "_type": "Text",
            "value": "3:42",
            "size": "sm",
            "color": "secondary"
          }
        ]
      }
    },
    {
      "_type": "ListViewItem",
      "_action": {
        "type": "play_track",
        "trackId": "t2"
      },
      "children": {
        "_type": "Row",
        "align": "center",
        "gap": 3,
        "children": [
          {
            "_type": "Image",
            "src": "https://images.unsplash.com/photo-1471478331149-c72f17e33c73?w=640&q=80",
            "alt": "Vinyl records stacked on a shelf",
            "size": "sm",
            "round": true
          },
          {
            "_type": "Col",
            "gap": 0,
            "children": [
              {
                "_type": "Text",
                "value": "City After Rain",
                "weight": "medium"
              },
              {
                "_type": "Caption",
                "value": "Northline"
              }
            ]
          },
          {
            "_type": "Spacer"
          },
          {
            "_type": "Text",
            "value": "4:18",
            "size": "sm",
            "color": "secondary"
          }
        ]
      }
    },
    {
      "_type": "ListViewItem",
      "_action": {
        "type": "play_track",
        "trackId": "t3"
      },
      "children": {
        "_type": "Row",
        "align": "center",
        "gap": 3,
        "children": [
          {
            "_type": "Image",
            "src": "https://images.unsplash.com/photo-1516280440614-37939bbacd81?w=640&q=80",
            "alt": "Singer performing under stage lights",
            "size": "sm",
            "round": true
          },
          {
            "_type": "Col",
            "gap": 0,
            "children": [
              {
                "_type": "Text",
                "value": "Quiet Hours",
                "weight": "medium"
              },
              {
                "_type": "Caption",
                "value": "Lumen"
              }
            ]
          },
          {
            "_type": "Spacer"
          },
          {
            "_type": "Text",
            "value": "2:55",
            "size": "sm",
            "color": "secondary"
          }
        ]
      }
    }
  ]
}

ListViewItem

A row inside a ListView. Carries _action to make the whole row clickable and keyboard-activatable.

Out for delivery

Estimated 2:00 to 4:00 PM

In progress

{
  "_type": "ListViewItem",
  "_action": {
    "type": "view_order_event",
    "eventId": "transit"
  },
  "children": {
    "_type": "Row",
    "justify": "between",
    "align": "center",
    "children": [
      {
        "_type": "Col",
        "gap": 1,
        "children": [
          {
            "_type": "Text",
            "value": "Out for delivery",
            "weight": "medium"
          },
          {
            "_type": "Caption",
            "value": "Estimated 2:00 to 4:00 PM"
          }
        ]
      },
      {
        "_type": "Badge",
        "value": "In progress",
        "variant": "info"
      }
    ]
  }
}

Steps

Numbered steps to follow in order, such as instructions or a how-to guide. Each step has a short title saying what to do and an optional detail on how.

Take the wheel off
Shift to the smallest cog, open the brake, and pull the wheel down.
Find the leak
Pump a little air in and listen, or hold the tube under water.
Patch the tube
Roughen the area, spread the glue, and wait until it turns matte.

{
  "_type": "Steps",
  "steps": [
    {
      "title": "Take the wheel off",
      "detail": "Shift to the smallest cog, open the brake, and pull the wheel down."
    },
    {
      "title": "Find the leak",
      "detail": "Pump a little air in and listen, or hold the tube under water."
    },
    {
      "title": "Patch the tube",
      "detail": "Roughen the area, spread the glue, and wait until it turns matte."
    }
  ]
}

stepsobject[]: The steps, in order.

Timeline

Events in time order, each with a time or date label, such as a schedule, an itinerary, or a history.

Day 1
San Francisco to Monterey
2 h drive, with a stop at the Santa Cruz boardwalk.
Day 2
Monterey to Big Sur
1 h drive. Catch Bixby Creek Bridge at sunset.
Day 3
Big Sur to San Luis Obispo

{
  "_type": "Timeline",
  "items": [
    {
      "time": "Day 1",
      "title": "San Francisco to Monterey",
      "detail": "2 h drive, with a stop at the Santa Cruz boardwalk."
    },
    {
      "time": "Day 2",
      "title": "Monterey to Big Sur",
      "detail": "1 h drive. Catch Bixby Creek Bridge at sunset."
    },
    {
      "time": "Day 3",
      "title": "Big Sur to San Luis Obispo"
    }
  ]
}

itemsobject[]: The events, in time order.

Feedback

1 elements

Alert

A highlighted message conveying urgency. tone drives the severity.

Payment received

Invoice #1842 was paid in full on July 12.

Card expiring soon

Update the card on file before July 31 to avoid failed charges.

{
  "_type": "Col",
  "gap": 3,
  "children": [
    {
      "_type": "Alert",
      "tone": "info",
      "title": "Payment received",
      "description": "Invoice #1842 was paid in full on July 12."
    },
    {
      "_type": "Alert",
      "tone": "warning",
      "title": "Card expiring soon",
      "description": "Update the card on file before July 31 to avoid failed charges."
    }
  ]
}

title?string | number: Alert title text or number.
description?string | number: Supporting description text or number.
tone?"info" | "success" | "warning" | "danger": Severity tone; defaults to info.