Divider

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

<Divider />

<Divider />

Introduction

import { Divider } from '@telus-uds/components-base'

Divider is effectively a styled, cross-platform hr component.

Guidance

Divider is based on the flexbox model and uses alignSelf: flex to span its flex parent.

Vertical

Vertical dividers can be created by passing a vertical boolean prop. In a flexbox row, vertical dividers will automatically size to their parent height.

info

Note that for a vertical divider the parent flex element must have flex direction set to row. This is the default for web but not for React Native.

Space

Pass a number referring to a position on the space scale to the space prop to create space either side of the divider.

<Divider space={1} />

<Divider space={1} />

As with other space props you can also use a responsive object.

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

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

To reduce the length of a divider, as well as creating space between it and its neighbours, wrap it in a Box component. For example, this will have the second-smallest theme-supported spacing value between the dividing line and its neighbours, and will shorten the line at either end by the same amount:

<Box variant={{ background: 'light' }} space={4}> <Divider /> </Box>

<Box variant={{ background: 'light' }} space={4}>
  <Divider />
</Box>

Accessibility

Dividers are labelled with ARIA attributes role="separator" and aria-orientation="vertical/horizontal" automatically. Note these only apply on web.

Props

Name	Type	Default	Description
vertical	bool	false	By default, the divider is a horizontal line the full width of its parent. With `vertical` prop and when inside a container with { flexDirection: row }, draws a full height vertical line.
tokens	custom		System tokens prop, see tokens for more details
space	union
variant	objectOf		System variant prop, see variants for more details