Search…
Box
Box is a component that renders as a surface as defined by aragonDS, and can optionally have a heading. It is commonly used in either slot of the Split component.

Usage

import { Box, Main, Split } from '@aragon/ui'
function App() {
return (
<Main>
<Split
primary={<Box>Primary content</Box>}
secondary={<Box heading="Secondary">Secondary content</Box>}
/>
</Main>
)
}

Props

heading

TYPE
DEFAULT VALUE
React node
None
Displays a heading on top of the Box. Generally used when the Box is passed to the secondary prop of Split.

children

TYPE
DEFAULT VALUE
React node
None
The content of Box.

padding

TYPE
DEFAULT VALUE
Number
None
The padding applied to the content of the box (i.e. the part below the heading, when set).
Note: when used in the primary slot of the Split component, the content padding will adapt to the layout (one or two columns). Set it to any value to override this behavior.
Last modified 2mo ago
Copy link
On this page
Usage
Props