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 { Divider, Text } 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 { Divider, Stack, Text, View } from 'biibaos'

export default function App() {
  return (
    <Stack direction="column" gap={24}>
      <View>
        <Text variant="caption">THIN</Text>
        <Divider weight="thin" />
      </View>
      <View>
        <Text variant="caption">MEDIUM</Text>
        <Divider weight="medium" />
      </View>
      <View>
        <Text variant="caption">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 { Divider, Stack, Badge } from 'biibaos'

export default function LabeledDividers() {
  return (
    <Stack direction="column" gap={24} style={{ width: '100%' }}>
      <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 { Divider, Stack, Text } from 'biibaos'

export default function VerticalDividers() {
  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