---
title: "Divider"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Divider with horizontal and vertical orientation. Text labels, icons, and color variants for clean section separation in layouts and forms."
url: https://frutjam.com/id/components/divider
---

# Divider Component

Komponen pemisah menciptakan pemisahan visual antar bagian konten. Ringan dan semantik, pembagi membantu menyusun informasi secara hierarkis dan meningkatkan keterbacaan. Sistem pembagi Frutjam mendukung orientasi horizontal dan vertikal dengan konten teks opsional untuk pemisahan berlabel antar bagian.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas              | Jenis    | Keterangan                                            |
| ------------------ | -------- | ----------------------------------------------------- |
| divider            | Basis    | Aturan horizontal dengan teks label terpusat opsional |
| divider-horizontal | Pengubah | Orientasi horizontal (default)                        |
| divider-vertical   | Pengubah | Orientasi vertikal                                    |
| divider-start      | Pengubah | Meratakan teks label ke awal                          |
| divider-end        | Pengubah | Meratakan teks label sampai akhir                     |
| divider-solid      | Gaya     | Gaya garis padat                                      |
| divider-dashed     | Gaya     | Gaya garis putus-putus                                |
| divider-dotted     | Gaya     | Gaya garis putus-putus                                |
| divider-primary    | Warna    | Warna tema utama                                      |
| divider-secondary  | Warna    | Warna tema sekunder                                   |
| divider-accent     | Warna    | Warna tema aksen                                      |
| divider-neutral    | Warna    | Warna tema netral                                     |
| divider-info       | Warna    | Info warna semantik                                   |
| divider-success    | Warna    | Warna semantik sukses                                 |
| divider-warning    | Warna    | Warna semantik peringatan                             |
| divider-error      | Warna    | Kesalahan warna semantik                              |

## Penggunaan Dasar

## Arah Pembagi

### Pembagi Horisontal

```html
<div class="divider divider-horizontal"></div>
```

### Pembagi Vertikal

```html
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical"></div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>
```

## Pembagi dengan Teks

### Horisontal dengan Teks

```html
<div class="divider divider-horizontal">OR</div>
```

### Vertikal dengan Teks

```html
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical">OR</div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>
```

## Warna Pembagi

```html
<div class="flex flex-col gap-8 w-full">
  <div class="divider">Default</div>
  <div class="divider divider-neutral">Neutral</div>
  <div class="divider divider-primary">Primary</div>
  <div class="divider divider-secondary">Secondary</div>
  <div class="divider divider-accent">Accent</div>
  <div class="divider divider-success">Success</div>
  <div class="divider divider-warning">Warning</div>
  <div class="divider divider-info">Info</div>
  <div class="divider divider-error">Error</div>
</div>
```

## Posisi Isi Pembagi

Anda dapat meratakan teks di dalam pembatas ke awal, tengah (default), atau akhir baris.

### Posisi Horisontal

```html
<div class="flex w-full gap-8 flex-col">
  <div class="divider divider-start">Start</div>
  <div class="divider">Default</div>
  <div class="divider divider-end">End</div>
</div>
```

### Posisi Vertikal

```html
<div class="flex justify-center w-full h-64 gap-12">
  <div class="divider divider-vertical divider-start">Start</div>
  <div class="divider divider-vertical">Default</div>
  <div class="divider divider-vertical divider-end">End</div>
</div>
```