Components
Divider
A thin line between pieces of content.
Divider separates content with a line. It can carry text in the middle and run vertically. It is a Server Component.
import Divider from '@hone-ui/react/Divider';Examples
OR
Section
<Divider />
<Divider variant="middle" />
<Divider>OR</Divider>
<Divider textAlign="left">Section</Divider>Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal', 'vertical' | 'horizontal' | The direction of the line. |
variant | 'fullWidth', 'inset', 'middle' | 'fullWidth' | The span of the line. |
flexItem | boolean | false | Stretches a vertical divider in a flex row. |
absolute | boolean | false | Pins it to the bottom of a positioned parent. |
textAlign | 'center', 'left', 'right' | 'center' | Where the text sits. |
component | ElementType | 'hr' or 'div' | The element to render. |
sx, className, style, ref, children | Standard. Children go in the middle of the line. |
Notes
lightis not supported. Set a color throughsxinstead.- Divider does not read
components.Divider.defaultProps, because it stays a Server Component.
Accessibility
An hr is a separator by itself. Other elements get role="separator", and vertical ones
aria-orientation="vertical".