Standard Components: The Core Gallery

Note: While A2UI allows you to register any custom component (like a FlightCard), the standard library provides a set of primitives for basic layout and display.

Layout Primitives

Structure your content with Flexbox-like containers.

1. Row (Horizontal)

Basic flex row.

Props: alignment, distribution.
Use for: Toolbars, chip lists, button groups.

{ "component": { "Row": { "children": ..., "distribution": "spaceBetween" } } }

2. Column (Vertical)

Basic flex column.

Use for: Form fields, list items, card bodies.

{ "component": { "Column": { "children": ... } } }

Display Primitives

3. Text

Semantic text rendering.

Props: usageHint (h1, h2, body, caption), color.

{ "component": { "Text": { "text": "Hello World", "usageHint": "h1" } } }

4. Image

Secure image rendering.

Props: url, alt.

{ "component": { "Image": { "url": "https://...", "alt": "Logo" } } }

5. Icon

Material Design icons (by default).

Props: name (e.g., check_circle), color, size.

{ "component": { "Icon": { "name": "check_circle" } } }

Interactive Components

Button

Clickable button with action support.

{
  "id": "submit-btn",
  "component": {
    "Button": {
      "child": "btn-text",
      "primary": true,
      "action": {"name": "submit_form"}
    }
  }
}

TextField

Text input field.

{
  "id": "email",
  "component": {
    "TextField": {
      "label": {"literalString": "Email"},
      "text": {"path": "/user/email"},
      "textFieldType": "shortText"
    }
  }
}

textFieldType: shortText, longText, number, date, obscured

Container Components

Card

Container with elevation/border and padding.

{
  "id": "card",
  "component": {
    "Card": { "child": "card-content" }
  }
}

Overlay dialog.

{
  "id": "dialog",
  "component": {
    "Modal": {
      "entryPointChild": "open-btn",
      "contentChild": "dialog-content"
    }
  }
}

Common Properties

id (required): Unique identifier.
weight: Flex-grow value when inside Row/Column.