Divider

Import

import { Divider } from '@tac-ui/native';

Playground

Interactively configure the Divider props below.

<Divider variant="full" orientation="horizontal" />

Full

The default variant spans the full width of its container as a 1px horizontal rule.

<Divider />

Inset

The inset variant adds horizontal margins on both sides, commonly used inside list items or cards.

<Divider variant="inset" />

Thick

The thick variant renders a 2px rule for stronger visual separation between major sections.

<Divider variant="thick" />

With Label

Pass a label string to render centered text between two rule lines, useful for separating form sections or login options.

<Divider variant="withLabel" label="OR" />

<Divider variant="withLabel" label="Continue with" />

Vertical Orientation

Set orientation to vertical to create a vertical separator, useful inside HStack or row layouts.

<HStack gap="md" style={{ height: 40 }}>
  <Text>Home</Text>
  <Divider orientation="vertical" />
  <Text>About</Text>
  <Divider orientation="vertical" />
  <Text>Contact</Text>
</HStack>

API Reference