import { Divider } from '@uhg-abyss/mobile';

orientation

margin

height

width

color

<View style={{ height: '320px' }}>
  <Divider />
</View>

Usage

Orientation

Use the orientation prop to adjust the orientation to either horizontal or vertical. The default setting is horizontal.

Width, Height and Margin

Use the width and height props to set the desired sizing dimensions. Depending on the orientation, they default to 2 or 100% to create a thin line.

Use the margin prop to set the margin between the divider and the content it is separating. Default is $semantic.spacing.sm.

When horizontal orientation is selected the settings are applied as follows:

• width : determines the left-to-right length of the of the divider; default setting is 100%
• height : determines the thickness of the divider; default setting is 2px
• margin: sets the marginVertical property

When vertical orientation is selected the settings are applied as follows:

• width : determines the thickness of the divider; default setting is 2px
• height : determines the top-to-bottom length of the of the divider; default setting is 100%
• margin: sets the marginHorizontal property

Color

Use the color property to set the color of the divider. The two color tokens fit Abyss design guidelines for thin and thick dividers respectively. The default is set to thin.

Divider Props

Prop Name	Type	Default	Description
color	string	$divider.color.surface.thin	The color of the divider
height	number | string	-	The height of the divider
margin	number | string	$semantic.spacing.sm	Margin between the divider and surrounding elements
orientation	'horizontal' | 'vertical'	horizontal	The orientation of the divider
width	number | string	-	The width of the divider

Divider Classes

Class Name	Description
abyss-divider-root	Divider root element

Color

Decorative only component -- does not need to meet minimum contrast ratio.

Search tokens

Divider Tokens

Token Name	Value
divider.color.surface.thick	#F3F3F3
divider.color.surface.thin	#CBCCCD