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

orientation

margin

height

width

color

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

Usage

Orientation

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

Width and height

Use the width and height props to set the desired sizing dimensions.

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

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%

Color

Use the color prop to set the color of the Divider. The default value is '$web.semantic.color.border.content.secondary'.

Divider Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
color	string	'$web.semantic.color.border.content.secondary'	-	The color of the divider
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
height	string | number	-	-	The height of the divider
margin	string | number	'$sm'	-	Margin between the divider and surrounding elements
orientation	"horizontal" | "vertical"	'horizontal'	-	The orientation of the divider
width	string | number	-	-	The width of the divider

Below are the link(s) to the relevant GitHub type files:

Abyss.d.ts

Divider.types.ts

Divider Classes

Class Name	Description
.abyss-divider-root	Divider root element