Divider

Copy for LLM

A Divider is a thin line that creates separation between two UI elements, separating content into clear groups of lists and layouts, with a role="separator".

Import

import { Divider } from "@cfa/react-core";

Live Editor

Examples

Default

Orientation

By default the Divider’s orientation is set to "horizontal".

Set the orientation prop to "vertical", to vertically separate content. The Divider’s must be in a child of a flex parent with flex-direction: row when set to "vertical".

Props

Visit the Documentation Site for the full list of props.

Divider

Name	Type	Default	Description
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.
className	`string`	`'react-aria-Separator'`	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
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	`Orientation`	`'horizontal'`	The orientation of the separator.
render	`DOMRenderFunction<"hr" \| "div", 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`	-	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.
style	`CSSProperties`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.
translate	`"yes" \| "no"`	-	-