Box

A theme-aware replacement for View with shorthand props for padding, margin, gap, alignment, and background color. Spacing values can be theme tokens (xs, sm, md, lg, xl) or raw numbers.

Usage

import { Box } from '@onlynative/components/layout'

<Box p="md" bg="#f5f5f5">
  <Typography variant="bodyMedium">Padded content</Typography>
</Box>

Spacing Tokens

Token	Value
xs	4
sm	8
md	16
lg	24
xl	32

You can also pass a raw number:

<Box p={20} mx={12}>
  {/* 20dp padding, 12dp horizontal margin */}
</Box>

Padding & Margin

{/* All sides */}
<Box p="md" m="sm" />

{/* Horizontal / Vertical */}
<Box px="lg" py="sm" />

{/* Individual sides (RTL-aware) */}
<Box pt="sm" pb="md" ps="lg" pe="xl" />

ps and pe map to paddingStart / paddingEnd, so they flip automatically in RTL layouts. The same applies to ms / me.

Gap

<Box gap="sm">
  <Button variant="filled">First</Button>
  <Button variant="outlined">Second</Button>
</Box>

rowGap and columnGap are also available for finer control.

Alignment

<Box align="center" justify="space-between">
  {/* Children are centered on the cross axis and spaced on the main axis */}
</Box>

Props

No props found for Box.