Box
A utility component for working with spacing and borders.
Features
- Shorthand margin and padding CSS declarations.
- Shorthand border and border-radius CSS declarations.
- Adheres to our spacing tokens.
Basic usage
First, import the component.
import {Box} from '@pleo-io/telescope'
Then use it, like so:
API reference
The component accepts the following props.
| Prop | Type | Default |
|---|---|---|
border | string | |
borderRadius | enum | |
m | enum | |
margin | enum | |
marginBottom | enum | |
marginLeft | enum | |
marginRight | enum | |
marginTop | enum | |
marginX | enum | |
marginY | enum | |
mb | enum | |
ml | enum | |
mr | enum | |
mt | enum | |
mx | enum | |
my | enum | |
p | enum | |
padding | enum | |
paddingBottom | enum | |
paddingLeft | enum | |
paddingRight | enum | |
paddingTop | enum | |
paddingX | enum | |
paddingY | enum | |
pb | enum | |
pl | enum | |
pr | enum | |
pt | enum | |
px | enum | |
py | enum |