Divider

A divider line separates contents each other.

A divider component is a fundamental element in user interfaces used to create visual separation and hierarchy within a layout. It serves to improve readability and organization by inserting horizontal or vertical lines or spaces that divide content. Dividers offer a versatile solution to distinguish sections or elements in various design contexts, making interfaces more structured and user-friendly.

Anatomy

The anatomy of a divider component is simple and consists of a straight line or space that visually separates content. Depending on its properties, dividers can take different forms, such as solid lines, dashed lines, and can be oriented horizontally or vertically. The anatomy of a divider is designed to be minimal and functional, effectively enhancing the organization of content.

anatomy of divider component

Properties

Divider components come with several properties that enable customization. These properties include the ability to set the line type (default or dashed), specify the orientation (horizontal or vertical), and control the thickness and color of the divider. By adjusting these properties, designers can create dividers that seamlessly integrate with their layout, providing the desired visual separation and structure.

Kind	Orientation
Default	Horizontal
Dashed	Vertical

Kind

• Default divider represents the standard line style, typically a solid and continuous line that visually separates content. It is the default appearance when no specific line style is defined.

• Dashed divider allows you to create a line with a dashed or dotted pattern. This style adds a touch of variation to the divider, providing a different visual effect while still separating content effectively.

React

import React from 'react';
import { PlusDivider } from '@plusui/react';

const DividerWithKind = () => (
  <>
    <PlusDivider kind="solid" />  {/* Solid divider */}
    <PlusDivider kind="dashed" />  {/* Dashed divider */}
  </>
);

export default DividerWithKind;

Angular

<plus-divider kind="solid"></plus-divider>  <!-- Solid divider -->
<plus-divider kind="dashed"></plus-divider>  <!-- Dashed divider -->

Vue

<template>
  <plus-divider kind="solid"></plus-divider>  <!-- Solid divider -->
  <plus-divider kind="dashed"></plus-divider>  <!-- Dashed divider -->
</template>

Javascript

<plus-divider kind="solid"></plus-divider>  <!-- Solid divider -->
<plus-divider kind="dashed"></plus-divider>  <!-- Dashed divider -->

Orientation

• Horizontal divider is useful for dividing content in a left-to-right or right-to-left fashion, enhancing readability and structure in a layout.

• Vertical divider is valuable for dividing content in an up-and-down fashion, improving visual organization and separation within the user interface.

React

import React from 'react';
import { PlusDivider } from '@plusui/react';

const DividerWithOrientation = () => (
  <>
    <PlusDivider />  {/* Horizontal divider */}
    <PlusDivider orientation="vertical" style={{ height: '200px' }} />  {/* Vertical divider */}
  </>
);

export default DividerWithOrientation;

Angular

<plus-divider></plus-divider>  <!-- Horizontal divider -->
<plus-divider orientation="vertical" style="height: 200px;"></plus-divider>  <!-- Vertical divider -->

Vue

<template>
  <plus-divider></plus-divider>  <!-- Horizontal divider -->
  <plus-divider orientation="vertical" style="height: 200px;"></plus-divider>  <!-- Vertical divider -->
</template>

Javascript

<plus-divider></plus-divider>  <!-- Horizontal divider -->
<plus-divider orientation="vertical" style="height: 200px;"></plus-divider>  <!-- Vertical divider -->

Layout & Spacing

The layout and spacing of a divider component play a critical role in enhancing the overall structure and aesthetics of a user interface. Careful consideration of the spacing around dividers ensures that content separation is both visually appealing and functional. By adjusting layout and spacing properties, you can create dividers that harmoniously integrate with your design, providing an organized and polished look to your interface.

Light & Dark Mode

Supporting both light and dark modes for the divider component ensures that it seamlessly adapts to various user interface themes and preferences. In light mode, dividers maintain a clean and classic appearance, while in dark mode, they offer a visually pleasing contrast. This flexibility not only aligns with contemporary design trends but also enhances user experience by catering to diverse design choices and accessibility needs, ensuring that your dividers seamlessly fit into any interface.

Accessibility

Creating an accessible divider component is crucial for an inclusive user interface. By implementing ARIA roles, labels, and keyboard navigation support, dividers become navigable and comprehensible for users with disabilities. This approach ensures that content separation is clear and meaningful, promoting a user-friendly and inclusive interface.

Criteria	Description	Status
Inline Text Spacing	Ensure that text spacing set through style attributes can be adjusted with custom stylesheets	Passed
ID Attribute	Ensures every id attribute value is unique	Passed
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	AA ~ AAA

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
orientation	Orientation	String	horizontal, vertical	horizontal
kind	Kind	String	solid, dashed	solid