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

orientation

margin

height

width

color

() => {
  return (
    <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 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 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

Name	Type	Default	Required	Description
color	Abyss.Color | undefined	-	-	Color of the divider
height	Abyss.Size | undefined	-	-	Height of the divider
margin	Abyss.Space | undefined	-	-	Margin of the divider
orientation	'horizontal' | 'vertical' | undefined	'horizontal'	-	Orientation of the divider
width	Abyss.Size | undefined	-	-	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.

Divider Tokens

Search tokens

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