Spacer

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<> <Typography>Above</Typography> <Divider /> <Spacer space={8} /> <Divider /> <Typography>Below</Typography> </>

<>
  <Typography>Above</Typography>
  <Divider />
  <Spacer space={8} />
  <Divider />
  <Typography>Below</Typography>
</>

Introduction

import { Spacer } from '@telus-uds/ds-allium'

An empty element used to create a gap between components.

Guidance

Use Spacer where a specific amount of space is needed between two specific items.

Where multiple items require a consistent amount of space between them, use StackView instead.

space prop

The space prop sets the size of the spacer, using the spacing scale. See spacing scale docs for details.

Loading...

<> <Divider /> <Spacer space={1} /> <Divider /> <Spacer space={2} /> <Divider /> <Spacer space={3} /> <Divider /> <Spacer space={{ xs: 4, md: 5, lg: 6 }} /> <Divider /> </>

<>
  <Divider />
  <Spacer space={1} />
  <Divider />
  <Spacer space={2} />
  <Divider />
  <Spacer space={3} />
  <Divider />
  <Spacer space={{ xs: 4, md: 5, lg: 6 }} />
  <Divider />
</>

direction prop

If used inside a container with flexDirection: 'row', the spacer's direction prop should be set to 'row', which applies the space horizontally.

By default, the direction is column and space is applied vertically.

Loading...

<StackView space={0} direction="row"> <Typography>Start</Typography> <Spacer space={{ xs: 2, sm: 3, md: 4, lg: 5 }} direction="row" /> <Divider vertical /> <Spacer space={6} direction="row" /> <Divider vertical /> <Spacer space={7} direction="row" /> <Divider vertical /> <Spacer space={8} direction="row" /> <Typography>End</Typography> </StackView>

<StackView space={0} direction="row">
  <Typography>Start</Typography>
  <Spacer space={{ xs: 2, sm: 3, md: 4, lg: 5 }} direction="row" />
  <Divider vertical />
  <Spacer space={6} direction="row" />
  <Divider vertical />
  <Spacer space={7} direction="row" />
  <Divider vertical />
  <Spacer space={8} direction="row" />
  <Typography>End</Typography>
</StackView>

Accessibility

Spacer has no accessibility props and is ignored by accessibility tools such as screen readers.

Platform considerations

The component is available on both native platforms and web.

Props

Name	Type	Default	Description
direction	'column' | 'row'	'column'	The spacer applies space in only one direction, which is controlled by the 'direction' prop: - ''column'' (default) applies space vertically; has a fixed height and not width. - ''row'' applies space horizontally; has a fixed width and not height.
space	spacingIndexPropType | spacingObjectPropType	1	The size of the spacer according to the theme's spacing scale. Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc), or, a SpacingObject with viewport keys and options (see 'useSpacingScale' for details).

Tokens

In exceptional circumstances, the following tokens can be passed to this component to override its default styles. Do not do this unless absolutely necessary. Read more about overriding styles.

View Tokens

Prop Name	Token Property	Token Type

Variants

This component does not have any stylistic variants.

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support