Pemisah

Pemisah memisahkan kelompok konten. Ia merender elemen role="separator" alih-alih <hr>, karena sebuah label masuk ke dalamnya sementara <hr> tidak menerima anak.

Pemisah dasar

Semua yang di atas.

Semua yang di bawah.

stack({ gap: 'none' },
  text({ tone: 'muted' }, 'Semua yang di atas.'),
  divider(),
  text({ tone: 'muted' }, 'Semua yang di bawah.'),
)

Dengan label

Anaknya menjadi label yang berada di tengah garis.

atau

stack({ gap: 'none' },
  button({ variant: 'outline', color: 'neutral', block: true }, 'Lanjutkan dengan GitHub'),
  divider('atau'),
  button({ block: true }, 'Lanjutkan dengan email'),
)

Jarak

spacing menyetel margin di atas dan di bawahnya, dari skala yang sama dengan yang dipakai segalanya.

Rapat

Bawaan

Lapang

Akhir

stack({ gap: 'none' },
  text({ variant: 'small', tone: 'muted' }, 'Rapat'),
  divider({ spacing: 'xs' }),
  text({ variant: 'small', tone: 'muted' }, 'Bawaan'),
  divider(),
  text({ variant: 'small', tone: 'muted' }, 'Lapang'),
  divider({ spacing: 'xl' }),
  text({ variant: 'small', tone: 'muted' }, 'Akhir'),
)

Tegak

Pemisah tegak butuh induk yang memberinya tinggi — baris flex yang itemnya meregang, dan itulah yang dilakukan stack() secara bawaan.

4,1 kB

12 halaman

0 island

stack({ direction: 'row', gap: 'none', align: 'stretch' },
  text({ variant: 'small' }, '4,1 kB'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '12 halaman'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '0 island'),
)

Props

Prop	Tipe	Bawaan	Deskripsi
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Ke arah mana garisnya membentang.
`spacing`	`Space`	`'md'`	Margin di kedua sisi garis.