Divider

Visual separator line for content sections. Can be horizontal (default) or vertical.

Import

import { Divider } from 'vuiii'

Basic Usage

View in Storybook

// Horizontal divider (default)
import { Divider } from 'vuiii'

<div>Section 1</div>
<Divider />
<div>Section 2</div>

More Examples

// Vertical divider (for inline content)
<div style="display: flex; align-items: center;">
  <span>Item 1</span>
  <Divider orientation="vertical" />
  <span>Item 2</span>
</div>

// In FormFields (using FORM_DIVIDER constant)
import { FORM_DIVIDER } from 'vuiii'

const fields = [
  { name: 'name', component: Input, label: 'Name' },
  FORM_DIVIDER,
  { name: 'email', component: Input, label: 'Email' }
]

Storybook

For interactive examples with all variants, see Divider in Storybook.