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.

The utilities are generated using the sprinkles vanilla-extract package.

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).

<Box as="button" backgroundColor="critical" p="200">
	<Text>Button</Text>
</Box>

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.

<Box style={{ color: 'red' }}>
	Red text
</Box>