Box | Components

Box

A basic building block that can be used as a simple container or the foundations of a component.

UsageAPI

Use Box...

If you need a simple container with spacing.
As the starting point of a component that understands the core SWAN props.

Don't use Box...

If an existing SWAN component can be used instead.

ReactVanilla

<>
  <Box>Box</Box>
</>

<>
  <Box>Box</Box>
</>

<div>Box</div>

<div>Box</div>

React API

Box is available for React API only. It is the basic building-block of a SWAN component. It understands all SWANs core props like spacing, background color, and visuallyHidden.

<>
  <Box paddingX={6} paddingY={7} bgc="accent">
    Box with a background color and added padding.
  </Box>
</>

<>
  <Box paddingX={6} paddingY={7} bgc="accent">
    Box with a background color and added padding.
  </Box>
</>

Vanilla API

Box is not available for Vanilla API. You can add the SWAN CSS classes to whatever HTML element you'd like, such as div.

<div class="swan-px-6 swan-py-7 swan-bgc-accent">
  Div with a background color and added padding.
</div>

<div class="swan-px-6 swan-py-7 swan-bgc-accent">
  Div with a background color and added padding.
</div>

Props

Box

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

Was this page useful?

Published: Jan 31, 2022Last updated: Sep 3, 2024