Box · Glowup

LAYOUT · 84 / 89

Box

Box — a Material You layout component for React Native and web.

󱀫

packages/ui/src/components/Layout/Box.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

primary

secondary

tertiary

error

Properties

4 controls

Padding

Background

Radius

Horizontal

Usage

Box.tsx

<Box />

Variants

The states and shapes this component is meant to be used in.

Padding

p / px / py take spacing token names

p="xs" — 4

p="m" — 16

px="xl" py="xs"

Surfaces

bg="surface"

bg="surfaceContainer"

bg="primaryContainer"

bg="tertiaryContainer"

Flex controls

justify="space-between" align="center"

A

radius="large" gap="xs"

B

C

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

26 on BoxProps

Also accepts everything from ViewProps.

Filter props

󰍉

align

ViewStyle["alignItems"]

bg

ColorValue

Background — an M3 color role name or a raw color.

borderColor

ColorValue

borderWidth

number

flex

number

gap

SpacingValue

height

ViewStyle["height"]

justify

ViewStyle["justifyContent"]

m

SpacingValue

Margin on every edge.

mb

SpacingValue

ml

SpacingValue

mr

SpacingValue

mt

SpacingValue

mx

SpacingValue

my

SpacingValue

p

SpacingValue

Padding on every edge.

pb

SpacingValue

pl

SpacingValue

pr

SpacingValue

pt

SpacingValue

px

SpacingValue

Horizontal padding.

py

SpacingValue

Vertical padding.

radius

RadiusValue

Corner radius — a shape token name or a raw radius.

row

boolean

Lays children out horizontally instead of vertically.

width

ViewStyle["width"]

wrap

boolean

󰅁

󰅂