Box nativelite

A styled container laid out by the whitelisted style object; the primitive every macro expands into.

Children: many

Preview

Loading the renderer…

pressable

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Box",
          "style": {
            "display": "flex",
            "flexDirection": "column",
            "gap": "$spacing.md",
            "padding": "$spacing.lg"
          },
          "children": [
            "c0-t1",
            "c0-t2"
          ]
        },
        {
          "id": "c0-t1",
          "component": "Text",
          "text": "A Box lays its children out by style.",
          "variant": "body"
        },
        {
          "id": "c0-t2",
          "component": "Text",
          "text": "Flex, grid, spacing and colours come from the whitelist.",
          "variant": "muted"
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Box rendered by the React renderer on Web — **Web** React

Box rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Box rendered by the Compose renderer on Android — **Android** Compose

Box rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-box, painted by each native renderer.

Props

Prop	Type	Default	Description
`style`	`style`	–	Layout and visual properties from the Box whitelist (flex, grid, sizes, spacing, colours).
`pressable`	`boolean`	–	Makes the box a press target that fires `press`.

Events and slots

Name	Kind
`on.press`	event: runs an action

Accessibility

Role: none
Semantics: group (button when pressable). A pressable Box is a button.

Keys	Action
`EnterSpace`	press (pressable only)

Theming

Recipe parts: Box/root
Keyed by: pressable:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme