Divider

The Divider component is used to visually separate sections of content in an interface. It provides a horizontal or vertical line that helps organize and structure the layout, improving readability and visual hierarchy.

tsx

import { Divider } from "@arkyn/components";

Basic usage

tsx

<Divider />

Orientations

The component offers two orientations: horizontal and vertical. Horizontal orientation is used to separate vertically stacked content, while vertical orientation separates side-by-side content.

Horizontal

Horizontal orientation is the default and is used to separate sections of content that are organized vertically.

Section 1

Section 2

Section 3

tsx

<div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
  <p>Section 1</p>
  <Divider />
  <p>Section 2</p>
  <Divider orientation="horizontal" />
  <p>Section 3</p>
</div>

Vertical

Vertical orientation is used to separate elements that are arranged horizontally, such as navigation bars or groups of buttons.

Item 1

Item 2

Item 3

tsx

<div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
  <span>Item 1</span>
  <Divider orientation="vertical" />
  <span>Item 2</span>
  <Divider orientation="vertical" />
  <span>Item 3</span>
</div>

Properties

orientation - "horizontal" | "vertical" (default: "horizontal") Defines the orientation of the divider

Other properties

All other standard HTML properties of <div> are also supported.

On this page