Box

Importing

import { Box } from '@customerio/pluma-components/react';

Style utilities

The Box component accepts a number of style utility props, which can be used for layout and styling. Because all Pluma components use Box, those props are available throughout the library.

Layout props such as display, flexDirection, gap, padding and margin also accept an object keyed by breakpoint, like flexDirection={{ base: 'column', md: 'row' }}; see Responsive layout.

Arbitrary values

Square brackets pass a raw CSS value to a style utility prop: px="[21px]" sets the left and right padding to 21px. Every prop that sets a single CSS property accepts brackets, including spacing and sizing props, display, position, cursor, zIndex, flexbox alignment and text props. truncate, visuallyHidden, centerBaseline and centerBaselineBefore don't. Spacing and sizing props take CSS lengths, percentages, calc() and var(). Shorthand props such as px apply the value to each side, and brackets also work in per-breakpoint objects.

In Vite apps, bracketed values need the style utility plugin and must be written in full in source or listed in its safelist. The gap props owned by List and ListItem remain token-backed.

<Box px="[21px]" display="[contents]" />
<Box px={{ md: '[2rem]' }} />

Spacing

Spacing prop values are based on the spacing tokens in the Pluma design system and follow the formula (token / 100) * 8px. This includes:

Padding

Padding uses space tokens and can be applied using the following props:

• pt (padding top)
• pr (padding right)
• pb (padding bottom)
• pl (padding left)
• px (padding horizontal)
• py (padding vertical)
• p (padding on all sides)

Margin

Margin uses space tokens and can be applied using the following props:

• mt (margin top)
• mr (margin right)
• mb (margin bottom)
• ml (margin left)
• mx (margin horizontal)
• my (margin vertical)
• m (margin on all sides)

In addition to the spacing properties, margin also supports the auto value.

Layout

Flexbox

Typography

Interactivity

Effects/styling

as prop

The Box component accepts an as prop, which changes what HTML element or component the box should render as (by default, div).

style prop

The Box component accepts a style prop, which allows you to pass in custom styles. This prop should be used instead of the style HTML attribute, since it prevents the styles from being overridden.