Component vocabulary

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

Layout

7 elements

Card

A titled section of related content, the default way to break a response into parts. It renders as plain content, so several in a row read as one answer rather than a stack of boxes; it takes on a framed surface only 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: Optional card title.
padding?number: Padding in 4px units (e.g. 2 = 8px). 0 to 8 is the supported range.
background?string: Background color or gradient (any CSS background value). 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 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, radius, and background accept arbitrary values, so they 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 (any CSS background value).

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.

Typography

4 elements

Header

A section heading. Renders as a bold title.

Weekly digest

{
  "$type": "Header",
  "text": "Weekly digest",
  "size": "xl"
}

textstring: The heading text.
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: The text content.
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: The caption text.

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

4 elements

Fact

A label/value pair, rendered as a key followed by its value. Use for compact metadata.

Status: Shipped

{
  "$type": "Fact",
  "label": "Status",
  "value": "Shipped"
}

labelstring: The fact label (key).
valuestring: The fact value.

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.

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: Badge text.
variant?string: Visual variant token.

Media

2 elements

Image

An image. Provide src and alt for accessibility.

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.
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

Controls

7 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: Button label.
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.

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: Placeholder shown when nothing is selected.
label?string: Accessible label for the control.
name?string: Field name used inside a Form.

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"
  }
}

placeholder?string: Placeholder text.
multiline?boolean: Render a textarea instead of a single-line input.
label?string: Accessible label for the control.
name?string: Field name used inside a Form.

DatePicker

A date input. Carries $action describing the on-select behavior.

{
  "$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"
  }
}

value?string: Initial date (YYYY-MM-DD).
min?string: Minimum date (YYYY-MM-DD).
max?string: Maximum date (YYYY-MM-DD).
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: Label text next to the checkbox.
name?string: Field name used inside a Form.
defaultChecked?boolean: Whether the checkbox starts checked.

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.

Form

Wraps named child controls (Select/Input/Checkbox/RadioGroup/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

2 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"
      }
    ]
  }
}

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: Alert title.
description?string: Supporting description text.
tone?"info" | "success" | "warning" | "danger": Severity tone; defaults to info.