Divider

Props

API reference for Divider. For usage examples, see the React tab.

Name	Type	Default
elementType	`string`
The HTML element type that will be used to render the separator.
orientation	`Orientation`	`'horizontal'`
The orientation of the separator.
variant	`"subtle"`
Lighter border treatment. Omit for the default bold divider.

Name	Type	Default
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.
id	`string`
The element's unique identifier. See MDN (opens in new tab).

Name	Type	Default
dir	`string`
hidden	`boolean`
inert	`boolean`
lang	`string`
render	`DOMRenderFunction<"div" \| "hr", undefined>`
Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
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.
suppressHydrationWarning	`boolean`
A React-only flag that suppresses the warning React normally logs when an element's server-rendered content doesn't match the client render during hydration. See React docs (opens in new tab).
translate	`"no" \| "yes"`

Name	Type	Default
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>`

Name	Type	Default
className	`string`	`'react-aria-Separator'`
The CSS className (opens in new tab) for the element.
style	`CSSProperties`
The inline style (opens in new tab) for the element.

Divider

Props

Accessibility (5)(5 props)

Advanced (8)(8 props)

Events (64)(64 props)

Styling (2)(2 props)