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

orientation

margin

height

width

color

() => {
  return (
    <styled.div css={{ height: '320px' }}>
      <Divider />
    </styled.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	Description
className	string | undefined		CSS class name to apply to each element within the component
color	string | undefined	'$web.semantic.color.border.content.secondary'	The color of the divider
css	CSSProperties | Partial<Record<"abyss-divider-root", CSSProperties>> | undefined		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 | undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
height	string | number | undefined		The height of the divider
hiddenFrom	Breakpoint | undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
margin	string | number | undefined	'$web.semantic.spacing.scale.sm'	Margin between the divider and surrounding elements
orientation	"horizontal" | "vertical" | undefined	'horizontal'	The orientation of the divider
slotProps	Partial<Record<"divider-root", SlotPropsLeafValue>> | undefined
visibleFrom	Breakpoint | undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.
width	string | number | undefined		The width of the divider

Divider Classes

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