# Box

Elemento abstracto tipo "vista" sobre el que están construidos (extienden) la mayoría de los componentes básicos de Magma. Renderiza un div con un reset de estilos básico.

"Está basado en [Reakit](https://reakit.io/components/box)"

**JSX**

```json
import Box from "@magma/components"

<Box>Hi! this is Box</Box>
```

**HTML**

```html
<div>Hi mate!</div>
```

## Propiedades

- [Html Tag](#html-tag)
- [Padding y Margin](#padding-y-margin)
- [Display](#display)
- [FontRes](#fontres)
- [Position](#position)
- [Color](#color)
- [Background Color](#background-color)
- [Border Radius](#border-radius)

### HTML Tag

Le podemos pasar mediante pa propiedad `as` el tag que queremos que renderice `<Box />` en lugar del `<div>` por defecto.

- `as`: Cualquier etiqueta html

**JSX**

```jsx
<Box as="h1">Hi! this is an H1</Box>
```

**HTML**

```html
<h1>Hi! this is an H1</h1>
```

### Padding y Margin

- `p`: padding
- `px`: padding-left & padding-right
- `py`: padding-top & padding-bottom
- `pt`: padding-top
- `pr`: padding-right
- `pb`: padding-bottom
- `pl`: padding-left
- `m`: margin
- `mx`: margin-left & margin-right
- `my`: margin-top & margin-bottom
- `mt`: margin-top
- `mr`: margin-right
- `mb`: margin-bottom
- `ml`: margin-left

### Display

Probablemente quieras usar los componentes dedicados `<Block />`, `<Inline />`, `< InlineBlock/>`, `<Flex />` y `<InlineFlex />`

- `block`: display: block
- `inline`: display: inline
- `inlineBlock`: display: inline-block
- `flex`: display: flex
- `inlineFlex`: display: inline-flex

### FontRes

Propiedad que espera un objeto `fontRes` de Magma (texto responsive)

- `fontRes`: FontRes de Magma

Uso

```json
import { textStyle } from "@magma/theme"

<Box textStyle={textStyle.m}>Hi, soy un texto M</Box>
```

### Position

- `static`: position: static
- `relative`: position: relative
- `absolute`: position: absolute
- `fixed`: position: fixed

### Color

- `color`: color: color

### Border Radius

- `radius`: border-radius: radius

### Background color

- `bgcolor`: background-color: bgcolor