# BoxProps

**Kind:** Interface

Props for the Box component. Also accepts:
* `AllStylesProps`
* `AriaProps`

## Properties

### `as?`

Type: `"div" | "span" | "section" | "main" | "nav" | "header" | "footer" | "aside" | "article" | "address" | "hgroup" | "blockquote" | "figure" | "figcaption" | "ol" | "ul" | "li" | "pre"`

The element that is rendered. Defaults to `div`.

### `children?`

Type: `React.ReactNode | string`

The contents of the box.

### `className?`

Type: `undefined | string`

Additional class names to apply, separated by spaces.

### `dataAttributes?`

Type: `DataAttributesProp`

Data attributes that are spread onto the element, e.g. `dataAttributes={{'data-*': '...'}}`.

### `id?`

Type: `undefined | string`

The `id` attribute.

### `role?`

Type: `undefined | string`

The `role` attribute.

### `style?`

Type: `React.CSSProperties`

Additional styles.

### `tabIndex?`

Type: `undefined | number`

The `tabIndex` attribute.

---

## Box

**Kind:** Component

A box component for creating layouts.

[[ Story id="box--example" title="Box example" ]]

**Parameters:**
- `props` (`BoxProps`)
- `ref` (`React.Ref<HTMLElement>`)

**Returns:** `Element`