Divider Overview

The divider component creates visual separation between content sections in layouts. It provides a clean, semantic way to organize content with proper spacing and visual hierarchy. The component supports both horizontal and vertical orientations, customizable spacing, and works seamlessly with different themes.

When to Use

✅ Use dividers when:

  • Separating distinct content sections
  • Creating visual hierarchy in lists or cards
  • Organizing form sections or navigation items
  • Providing breaks in dense content layouts
  • Building responsive layouts that need flexible spacing

❌ Don't use dividers for:

  • Purely decorative purposes without semantic meaning
  • Heavy visual separation (use spacing or containers instead)
  • Between every content item (can create visual clutter)
  • Where whitespace alone would be sufficient
Design system docs Examples Basic Usage

The default divider provides horizontal separation with standard spacing:

text 1 text 2

pure css 1

pure css 2

Vertical Dividers

Use vertical dividers to separate content in horizontal layouts such as navigation bars or inline elements:

vertical / spacing 200 button
pure css vertical / spacing 200
button
Spacing Controls

Control the spacing around dividers using the design system's spacing scale. This affects the margin on both sides of the divider to create appropriate visual separation:

spacing="800" spacing="800"

pure css dds-divider--spacing-800

pure css dds-divider--spacing-800

Theme Variations

The divider component automatically adapts to different themes. Use the inverted variant for dark backgrounds:

spacing 400 inverted color spacing 400

pure css spacing 400 inverted color

spacing 400

Real-World Patterns Navigation Separators
Card Content Separation
User Profile Manage your account settings and preferences Account Information Email: john.doe@example.com Member since: January 2024 Edit Profile Change Password
Form Section Separators
Contact Form Personal Information Message Send Message Clear Form
List Item Separators
Recent Activity Document updated 2 hours ago New comment received 4 hours ago Profile photo changed 1 day ago Account created 3 days ago
Importing 
import { DapDSDivider } from 'dap-design-system'
Importing React 
import { DapDSDividerReact } from 'dap-design-system/react'
Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSDivider } from 'dap-design-system/components'
Attributes
PropertyTypeDefaultDescription
verticalbooleanfalseWhether the divider is vertical
spacing0, 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 1000 , 1200 , 1400 , 1600 , 1800 , 2000 , 2400 , 3000 , 4000 , 5000 , 60000The spacing of the divider
variant'normal', 'inverted''normal'The variant of the divider
Slots

No slots available.

Events

No custom events available.

CSS Parts

No CSS parts available.

CSS Custom Properties
Property NameDescription
--dds-divider-border-widthThe width of the divider border. (default: var(--dds-border-width-base))
--dds-divider-border-styleThe style of the divider border. (default: solid)
--dds-divider-border-colorThe color of the divider border. (default: var(--dds-border-neutral-divider))
--dds-divider-border-color-invertedThe color of the divider border when inverted. (default: var(--dds-border-neutral-divider-inverted))
How to Use CSS Custom Properties

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-divider
  style="--dds-divider-border-width: value; --dds-divider-border-style: value;">
  Divider
</dap-ds-divider>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-divider {
  --dds-divider-border-width: value;
  --dds-divider-border-style: value;
  --dds-divider-border-color: value;
}

<dap-ds-divider class="my-custom-dap-ds-divider">
  Divider
</dap-ds-divider>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-divider {
  --dds-divider-border-width: value;
  --dds-divider-border-style: value;
}

CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.