Divider

A separator line that distinguishes content. Implements global theme configuration based on BrConfigProvider.

Basic Usage

Separate text paragraphs of different sections.

BreezeUI

A Vue 3 Component Library

Docs

Source

Releases

Example

Divider with Text

You can display text in the middle, start, or end of the divider.

Center

Start

End

Custom Slot

Example

Vertical Divider

Use the orientation="vertical" prop to set it to vertical direction.

Left

Middle

Right

OR

Example

Styles

Supports solid, dashed, dotted lines, as well as custom colors and thickness.

Solid

Dashed

Dotted

Custom Color

Thickness

Example

Custom Gap & Render Tag

You can use the gap prop to adjust the spacing between the divider and the text, and the as prop to change the rendered HTML tag.

Custom Gap

Default Gap

Gap: 0

Gap: 2rem

Gap: 50px

Render as <li>

• Item 1
• Item 2
• Item 3

Example

Theming

BrDivider fully integrates with BrConfigProvider, allowing you to customize styles via global configuration or local class names.

Global Configuration (BrConfigProvider)

You can globally modify the divider color (corresponding to the --border variable) via BrConfigProvider.

Global Theme (Blue Border)

Link 1

Link 2

Local Override (Red)

Example

Local Customization (TailwindCSS)

You can pass TailwindCSS class names directly via the class prop to override default styles.

<BrDivider class="bg-red-500 h-2" />

API

Props

Name	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Divider orientation
decorative	boolean	true	Whether it is purely decorative (no semantic meaning)
label	string	-	Divider text
labelPlacement	'start' | 'center' | 'end'	'center'	Text placement
type	'solid' | 'dashed' | 'dotted'	'solid'	Divider style type
color	string	-	Custom color
thickness	number | string	-	Divider thickness
gap	number | string	-	Gap between text and divider
as	string	'div'	HTML tag to render
class	string	-	Custom class names

Slots

Name	Description
default	Custom divider content, takes precedence over label prop