Skip to content

Box

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

Group: Layout · Kind: native · in the lite catalog

example
A Box lays its children out by style.Flex, grid, spacing and colours come from the whitelist.

Open in the playground

The same specimen painted by React, SwiftUI, Compose and gpui.

exponential-ui-box on Web
exponential-ui-box on iOS
exponential-ui-box on Android
exponential-ui-box on Desktop
Prop Type Required Bindable 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.
  • on.press: runs an action

None.

many

No basic catalog component maps here.

A native component: every renderer paints it directly.

Role: none

group (button when pressable). A pressable Box is a button.

Keys Action
Enter Space press (pressable only)

Recipe parts: Box/root

Keyed by: pressable :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover

Themes · Write a theme

Stack · Grid · Card · Separator · List · Resizable · ScrollArea · Sidebar