Live Docs

Layout /

stable

Divider

Pemisah visual antar konten horizontal/vertical, termasuk varian dashed dan label section.

import { Divider } from "@naraya/ui";

Overview

Divider membantu membagi area konten agar scanning lebih jelas. Gunakan seperlunya agar tampilan tidak bising.

Examples

Horizontal solid (default)

Bagian atas

Bagian bawah

<Divider />

Horizontal dashed

Tahap 1

Tahap 2

<Divider variant="dashed" />

With label

Metode login

Lanjut dengan OTP

<Divider label="atau" />

Vertical divider

Overview

Settings

Logs

<Divider orientation="vertical" />
<Divider orientation="vertical" variant="dashed" />

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Arah divider.
variant"solid" | "dashed""solid"Gaya garis divider.
labelReactNodeLabel tengah (hanya horizontal).
...restHTMLAttributes<HTMLDivElement>Props native div.

Tokens Used

--border-subtle

Warna garis divider

--text-muted

Label divider text

--space-*

Jarak margin/padding sekitar divider

Accessibility

  • Divider memakai role='separator' dengan aria-orientation yang sesuai.
  • Jangan gunakan divider berlebihan sehingga mengganggu alur baca visual.
  • Label divider harus singkat dan kontekstual (mis. 'atau').