Skip to content
A utility component for controlling horizontal layouts.
  • Control the space between children.
  • Control the alignment of children.
  • Adheres to our spacing tokens.

First, import the component.

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

Then use it, like so:

The component accepts the following props.

PropTypeDefault
align
string
alignX
enum
alignY
enum
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
space
enum
stretchChildren
boolean
wrap
boolean

Also accepts all styled-system flexbox and space props if you need more flexiblity.

  • Box: A utility component for working with spacing and borders.
  • Stack: A utility component for controlling vertical layouts.