Divider

A <Divider> is a visual separator between two groups of content, e.g. groups of menu items or sections of a page.

Anatomy

The <Divider> component contains a single element that can be used to create a horizontal or vertical line to separate content.

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Variant

Size

The selected theme does not has any options for "size".

Property	Type	Description
`variant`	`default \| bold`	The available variants of this component.
`size`	`-`	The available sizes of this component.

Usage

You should use <Divider> to visually separate related content, such as sections in a settings page, items in a list, or actions in a toolbar. They help improve clarity and organization without adding semantic meaning. However, dividers should be used sparingly—only when spacing alone doesn’t provide enough separation. Avoid them if they create visual clutter or when semantic elements like headings or sections are more appropriate.

Preview

Code

Account Information

Update your name, email address, and password.

Notification Settings

Choose how you want to receive updates and alerts.

Accessibility

The <Divider> uses the ARIA role separator to indicate that it visually separates and distinguishes sections of content or groups of menu items.

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Divider stories

aria-describedby?

string;

Identifies the element (or elements) that describes the object.

aria-details?

string;

Identifies the element (or elements) that provide a detailed, extended description for the object.

aria-label?

string;

Defines a string value that labels the current element.

aria-labelledby?

string;

Identifies the element (or elements) that labels the current element.

dir?

string;

elementType?

string;

The HTML element type that will be used to render the separator.

hidden?

boolean;

id?

string;

The element's unique identifier. See MDN.

inert?

boolean;

lang?

string;

onAnimationEnd?

AnimationEventHandler<HTMLElement>;

onAnimationEndCapture?

AnimationEventHandler<HTMLElement>;

onAnimationIteration?

AnimationEventHandler<HTMLElement>;

onAnimationIterationCapture?

AnimationEventHandler<HTMLElement>;

onAnimationStart?

AnimationEventHandler<HTMLElement>;

onAnimationStartCapture?

AnimationEventHandler<HTMLElement>;

onAuxClick?

MouseEventHandler<HTMLElement>;

onAuxClickCapture?

MouseEventHandler<HTMLElement>;

onClick?

MouseEventHandler<HTMLElement>;

onClickCapture?

MouseEventHandler<HTMLElement>;

onContextMenu?

MouseEventHandler<HTMLElement>;

onContextMenuCapture?

MouseEventHandler<HTMLElement>;

onDoubleClick?

MouseEventHandler<HTMLElement>;

onDoubleClickCapture?

MouseEventHandler<HTMLElement>;

onGotPointerCapture?

PointerEventHandler<HTMLElement>;

onGotPointerCaptureCapture?

PointerEventHandler<HTMLElement>;

onLostPointerCapture?

PointerEventHandler<HTMLElement>;

onLostPointerCaptureCapture?

PointerEventHandler<HTMLElement>;

onMouseDown?

MouseEventHandler<HTMLElement>;

onMouseDownCapture?

MouseEventHandler<HTMLElement>;

onMouseEnter?

MouseEventHandler<HTMLElement>;

onMouseLeave?

MouseEventHandler<HTMLElement>;

onMouseMove?

MouseEventHandler<HTMLElement>;

onMouseMoveCapture?

MouseEventHandler<HTMLElement>;

onMouseOut?

MouseEventHandler<HTMLElement>;

onMouseOutCapture?

MouseEventHandler<HTMLElement>;

onMouseOver?

MouseEventHandler<HTMLElement>;

onMouseOverCapture?

MouseEventHandler<HTMLElement>;

onMouseUp?

MouseEventHandler<HTMLElement>;

onMouseUpCapture?

MouseEventHandler<HTMLElement>;

onPointerCancel?

PointerEventHandler<HTMLElement>;

onPointerCancelCapture?

PointerEventHandler<HTMLElement>;

onPointerDown?

PointerEventHandler<HTMLElement>;

onPointerDownCapture?

PointerEventHandler<HTMLElement>;

onPointerEnter?

PointerEventHandler<HTMLElement>;

onPointerLeave?

PointerEventHandler<HTMLElement>;

onPointerMove?

PointerEventHandler<HTMLElement>;

onPointerMoveCapture?

PointerEventHandler<HTMLElement>;

onPointerOut?

PointerEventHandler<HTMLElement>;

onPointerOutCapture?

PointerEventHandler<HTMLElement>;

onPointerOver?

PointerEventHandler<HTMLElement>;

onPointerOverCapture?

PointerEventHandler<HTMLElement>;

onPointerUp?

PointerEventHandler<HTMLElement>;

onPointerUpCapture?

PointerEventHandler<HTMLElement>;

onScroll?

UIEventHandler<HTMLElement>;

onScrollCapture?

UIEventHandler<HTMLElement>;

onTouchCancel?

TouchEventHandler<HTMLElement>;

onTouchCancelCapture?

TouchEventHandler<HTMLElement>;

onTouchEnd?

TouchEventHandler<HTMLElement>;

onTouchEndCapture?

TouchEventHandler<HTMLElement>;

onTouchMove?

TouchEventHandler<HTMLElement>;

onTouchMoveCapture?

TouchEventHandler<HTMLElement>;

onTouchStart?

TouchEventHandler<HTMLElement>;

onTouchStartCapture?

TouchEventHandler<HTMLElement>;

onTransitionCancel?

TransitionEventHandler<HTMLElement>;

onTransitionCancelCapture?

TransitionEventHandler<HTMLElement>;

onTransitionEnd?

TransitionEventHandler<HTMLElement>;

onTransitionEndCapture?

TransitionEventHandler<HTMLElement>;

onTransitionRun?

TransitionEventHandler<HTMLElement>;

onTransitionRunCapture?

TransitionEventHandler<HTMLElement>;

onTransitionStart?

TransitionEventHandler<HTMLElement>;

onTransitionStartCapture?

TransitionEventHandler<HTMLElement>;

onWheel?

WheelEventHandler<HTMLElement>;

onWheelCapture?

WheelEventHandler<HTMLElement>;

orientation?

AlignmentProp;

The orientation of the separator.

Defaults to:

'horizontal'

slot?

string | null;

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.

translate?

"yes" | "no";

Alternative components

Stack: If you need to create space between elements, consider using the <Stack> component instead of a divider. It provides spacing without the visual line.

Last update: 2 months ago

Appearance