import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import { Box } from "./Box";

<Meta title="Components/Layout/Box" component={Box} />

# Box

`Box` is a primitive component used as a building block for other components throughout the design system. It can render different HTML elements (using the `as` prop), but will render a `<div>` by default.

```jsx
import { Box } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="Box">
    <Box>This is the Box component</Box>
  </Story>
</Preview>

## `Box` Custom Props

This component uses `React.HTMLProps<HTMLDivElement>` and does not have any custom props. Full list of props <a href="#all-props">below</a>.

## All props

<Props of={Box} />