Layout

Divider

Horizontal or vertical separator with optional label.

Basic Usage

Standard horizontal separator for layout hierarchy.

Section Above

Section Below

'use client'

import React from 'react'
import { Text, Divider } from 'biibaos'

export default function App() {
  return (
    <div style={{ width: '100%', maxWidth: 400 }}>
            <Text variant="body-sm">Section Above</Text>
            <Divider style={{ margin: '20px 0' }} />
            <Text variant="body-sm">Section Below</Text>
          </div>
  )
}

Weights & Styles

Control the visual prominence of separators using weights.

THIN (DEFAULT)

MEDIUM

THICK

'use client'

import React from 'react'
import { Stack, Text, View, Divider } from 'biibaos'

export default function App() {
  return (
    <Stack direction="column" gap={24} style={{ width: '100%', maxWidth: 400 }}>
            <View>
              <Text variant="caption" color="muted" style={{ marginBottom: 8, display: 'block' }}>THIN (DEFAULT)</Text>
              <Divider weight="thin" />
            </View>
            <View>
              <Text variant="caption" color="muted" style={{ marginBottom: 8, display: 'block' }}>MEDIUM</Text>
              <Divider weight="medium" />
            </View>
            <View>
              <Text variant="caption" color="muted" style={{ marginBottom: 8, display: 'block' }}>THICK</Text>
              <Divider weight="thick" />
            </View>
          </Stack>
  )
}

With Labels

Dividers can contain text or custom elements, often used for "OR" separators in login forms.

CONTINUE WITH

Section 2

'use client'

import React from 'react'
import { Stack, Badge, Divider } from 'biibaos'

export default function App() {
  return (
    <Stack direction="column" gap={24} fullWidth>
            <Divider label="CONTINUE WITH" />
            <Divider label={<Badge variant="ghost" pill>Section 2</Badge>} weight="medium" />
          </Stack>
  )
}

Vertical Orientation

Perfect for separating inline items in headers or footers. Ensure the parent has a defined height.

Overview

Analytics

Reports

'use client'

import React from 'react'
import { Stack, Text, Divider } from 'biibaos'

export default function App() {
  return (
    <Stack direction="row" gap={12} align="center" style={{ height: 20 }}>
            <Text variant="body-sm">Overview</Text>
            <Divider orientation="vertical" />
            <Text variant="body-sm">Analytics</Text>
            <Divider orientation="vertical" />
            <Text variant="body-sm">Reports</Text>
          </Stack>
  )
}

Properties

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	—	Structural layout direction (horizontal or vertical)
`label`	`React.ReactNode`	—	Text or element placed at the center
`weight`	`'thin' \| 'medium' \| 'thick'`	—	Thickness variant
`color`	`string`	—	Color of the line

Card

Spinner