Divider

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

Import

import { Divider } from 'vuiii'

Basic Usage

Section 1

---

Section 2

View in Storybook

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

Props

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Separator direction

Vertical

A vertical divider takes its height from the flex row it sits in, so it needs a flex parent with align-items set.

Item 1

---

Item 2

---

Item 3

<div style="display: flex; align-items: center">
  <span>Item 1</span>
  <Divider orientation="vertical" />
  <span>Item 2</span>
</div>

In a Generated Form

FormFields renders a Divider wherever it finds the FORM_DIVIDER constant in the field list, so you can separate sections without leaving the config array.

import { FORM_DIVIDER } from 'vuiii'

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

See Composing Forms for the rest of the field config.

Storybook

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