Components

Box

Guidelines

A utility component for working with spacing.

Features

Shorthand margin and padding CSS declarations.
Adheres to our spacing tokens.

Basic usage

First, import the component.

import {Box} from '@pleo-io/telescope'

Then use it, like so:

Show code

<div css={{border: `1px dashed ${tokens.colorBorderStaticLoud}`}}>
    <Box p={10} m={10} css={{background: tokens.colorBackgroundStaticInverse}}>
        <div css={{width: 40, height: 40, border: `1px dashed ${tokens.colorBorderStaticLoud}`}} />
    </Box>
</div>

API reference

The component accepts the following props.

Prop	Type	Default
`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`

Inline: A utility component for controlling horizontal layouts.
Stack: A utility component for controlling vertical layouts.

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

Edit this page

Box

Features

Basic usage

API reference

Related components