Separator

Thin line that divides content, with an optional inline label such as "or".

Browsers: Chrome 123+, Firefox 121+, Safari 17.5+
Tier: 0
Forced layout budget: 0 ms
Axe budget: 0
SSR compatible: Yes
Published contract: Test harness

Playground

OverviewPlayground

No preview for this component yet.

React

Tailwind

import { FieldSeparator, Separator } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Separator />
      <FieldSeparator>or</FieldSeparator>
    </>
  );
}

API

Separator

Prop	Type	Default	Description
`orientation`	`SeparatorOrientation`	`"horizontal"`	Direction of the line. Vertical also writes aria-orientation="vertical".

Accessibility

A native hr is exposed as a separator. FieldSeparator with text hides its two lines from assistive technology and leaves the text readable; without text it is one separator.

Styling hooks

data-orientation
data-content