Divider

A divider component for separating content with optional text, supporting horizontal and vertical directions.

?

Name	Category	Description	Type	Default
content-position	? Style	Content position (horizontal only)	'left' | 'center' | 'right'	'center'
type	? Style	Preset theme color type	'primary' | 'success' | 'warning' | 'danger' | 'info'	—
border-style	? Style	Border style	'solid' | 'dashed' | 'dotted'	'solid'
color	? Color	Custom hex color	string	—
direction	? Behavior	Divider direction	'horizontal' | 'vertical'	'horizontal'
content	? Content	Divider text content	string	—
default	? Slot	Custom divider content (horizontal only)		—

Basic Usage

Use px-divider to separate content. You can add text via the content prop or the default slot.

<template>
  <div class="demo-divider">
    <p>Pixel art is a form of digital art where images are edited at the pixel level.</p>
    <px-divider />
    <p>It originated from the limitations of early computer graphics and video game consoles.</p>
    <px-divider content="Text Content" />
    <p>Today, pixel art is a popular aesthetic choice in indie games and retro-themed designs.</p>
  </div>
</template>

<style scoped>
.demo-divider p {
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-regular);
  margin: 0;
}
</style>

Vertical

Use direction="vertical" for inline vertical separators. Vertical dividers do not render content.

<template>
  <div class="demo-divider">
    <span>Home</span>
    <px-divider direction="vertical" />
    <span>About</span>
    <px-divider direction="vertical" />
    <span>Contact</span>
  </div>
</template>

<style scoped>
.demo-divider {
  display: flex;
  align-items: center;
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-regular);
}
</style>

Content Position

Use content-position to control where the text appears on the divider line.

<template>
  <div class="demo-divider">
    <px-divider content="Left" content-position="left" />
    <px-divider content="Center" content-position="center" />
    <px-divider content="Right" content-position="right" />
  </div>
</template>

<style scoped>
.demo-divider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Type

Use type property to apply preset theme colors to the divider.

<template>
  <div class="demo-divider">
    <px-divider content="Primary" type="primary" />
    <px-divider content="Success" type="success" />
    <px-divider content="Warning" type="warning" />
    <px-divider content="Danger" type="danger" />
    <px-divider content="Info" type="info" />
  </div>
</template>

<style scoped>
.demo-divider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Custom Color

Use color property to set a custom hex color for the divider line and text.

<template>
  <div class="demo-divider">
    <px-divider content="Coral" color="#ff6b6b" />
    <px-divider content="Teal" color="#20c997" />
    <px-divider content="Purple" color="#845ef7" />
  </div>
</template>

<style scoped>
.demo-divider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Border Style

Use border-style property to change the line pattern. Supports solid, dashed, and dotted with pixel-art patterns.

<template>
  <div class="demo-divider">
    <px-divider content="Solid (default)" />
    <px-divider content="Dashed" border-style="dashed" />
    <px-divider content="Dotted" border-style="dotted" />
  </div>
</template>

<style scoped>
.demo-divider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>