Mockline v0.19.0

Divider

A flexible divider component that can be used to separate content with optional labels, icons, and various styles.

Overview

The Divider component is used to create visual separation between content sections. It supports both horizontal and vertical orientations, various styles, and can include optional labels or icons.

Features

  • Multiple visual variants (solid, dashed, dotted, gradient)
  • Horizontal and vertical orientations
  • Different sizes (xs to xl)
  • Optional label or icon
  • Color variations
  • Customizable appearance

Usage

Basic Divider

The simplest way to use the divider is without any content:

<template>
  <MDivider />
</template>

With Label

Add text labels to provide context:

OR
Section Break
<template>
  <MDivider label="OR" />
  <MDivider label="Section Break" />
</template>

With Icon

Use icons for visual separation:

<template>
  <MDivider icon="i-lucide-star" />
  <MDivider icon="i-lucide-heart" />
</template>

Variants

Different border styles for various contexts:

Solid
Dashed
Dotted
Gradient
<template>
  <MDivider variant="solid" label="Solid" />
  <MDivider variant="dashed" label="Dashed" />
  <MDivider variant="dotted" label="Dotted" />
  <MDivider variant="gradient" label="Gradient" />
</template>

Colors

Choose between different colors:

Neutral
Primary
<template>
  <MDivider color="neutral" label="Neutral" />
  <MDivider color="primary" label="Primary" />
</template>

Sizes

Available in different thicknesses:

Extra Small
Small
Medium
Large
Extra Large
<template>
  <MDivider size="xs" label="Extra Small" />
  <MDivider size="sm" label="Small" />
  <MDivider size="md" label="Medium" />
  <MDivider size="lg" label="Large" />
  <MDivider size="xl" label="Extra Large" />
</template>

Vertical Orientation

Use vertical dividers to separate inline content:

Content

More Content

OR

Extra Content

<template>
  <div class="h-32 flex items-center justify-center gap-4">
    Content
    <MDivider orientation="vertical" />
    More Content
    <MDivider orientation="vertical" label="OR" />
    Extra Content
  </div>
</template>

Props

label
string

Text to display in the center of the divider.

icon
string

Icon to display in the center of the divider.

color
'primary' | 'neutral'

The color scheme of the divider.

size
'xs' | 'sm' | 'md' | 'lg' | 'xl'

The thickness of the divider line.

variant
'solid' | 'dashed' | 'dotted' | 'gradient'

The visual style of the divider line.

orientation
'horizontal' | 'vertical'

The orientation of the divider.

class
string

Additional CSS classes to apply to the root element.

borderClass
string

Additional CSS classes to apply to the border element.

labelClass
string

Additional CSS classes to apply to the label.

iconClass
string

Additional CSS classes to apply to the icon.

Slots

default
any

Custom content to display in the center of the divider.

Best Practices

  1. Visual separation:
    • Use dividers sparingly to avoid cluttering the interface
    • Choose appropriate variants for the context
    • Maintain consistent styling within sections
  2. Content organization:
    • Use labels to provide meaningful context
    • Keep labels concise and clear
    • Consider using icons for visual hierarchy
  3. Spacing considerations:
    • Maintain consistent spacing around dividers
    • Adjust size based on content importance
    • Consider responsive behavior
  4. Accessibility:
    • Ensure sufficient color contrast
    • Use semantic markup when possible
    • Consider screen reader users
  5. Layout guidelines:
    • Use horizontal dividers for section breaks
    • Use vertical dividers for inline content separation
    • Maintain alignment with surrounding content
Card
A versatile container component that groups related content and actions with support for header, body, and footer sections.
Link
A versatile link component that supports both internal and external navigation with active state detection and various styling options.