Github

Divider

Dividers separate content sections to improve visual structure and readability.

Component variations

Direction

Contains: Horizontal, Vertical. Horizontal is default

Content beside vertical divider

Style

Contains: Solid, Dashed. Solid is default

Inset

Is a boolean value. True makes the divider inset from the edges.

Color

Contains: Primary, Secondary. Primary is default

Usage Guidelines

Import

Import the divider component in your module or component:

import-divider.ts

Copy code

Basic Implementation

Here is a basic example of using the divider component:

divider-example.html

Copy code

Implementation with all available APIs

Here is an example of using the divider component with all available APIs:

divider-example.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
dashed
boolean
false
No
Whether the divider line should be dashed
color
string
'primary'
No
Color of the divider
direction
string
'horizontal'
No
Direction of the divider (horizontal or vertical)
inset
boolean
false
No
Whether the divider should be inset

Best Practices

When to Use

  • Use Divider when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Divider when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use horizontal dividers to separate content sections vertically
  • Use vertical dividers when creating side-by-side layouts
  • Use dashed style for less prominent separations
  • Use inset when divider should not extend to container edges
  • Ensure sufficient spacing around dividers for visual clarity
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the divider features in this section

example.html

Copy code