Unkey
DocsContributingCompanyArchitectureInfrastructureRFCsDesignGitHub
Components

Separator

A visual divider that separates content either horizontally or vertically.

Usage

import { Separator } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <div>
      <div>Above the separator</div>
      <Separator />
      <div>Below the separator</div>
    </div>
  );
}

Examples

Horizontal

Horizontal

Some content above
Some content below

Vertical

Vertical

Left
Left Content
Left Content
Right
Right Content
Right Content

Decorative

Decorative

Some content above
Some content below

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"The orientation of the separator.
decorativebooleanfalseWhether the separator is decorative and should not be visible to screen readers.

Accessibility

The Separator component is built on top of the Radix UI Separator primitive and follows WAI-ARIA guidelines:

  • Uses role="separator" to indicate its semantic meaning
  • Can be marked as decorative using the decorative prop
  • Maintains proper spacing and visual contrast for accessibility

Previous

Loading

Next

Button

On this page