Divider

<zeno-divider>LayoutSource

A line between sections, horizontal or vertical, with optional text.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Basic

A thin line between two blocks of content.

Your plan includes 10 GB of storage.

You have used 4.2 GB.

<p>Your plan includes 10 GB of storage.</p>
<zeno-divider></zeno-divider>
<p>You have used 4.2 GB.</p>

With text

Content in the default slot sits in the line. align moves it to the start or the end.

Or Details More

<zeno-divider>Or</zeno-divider>
<zeno-divider align="start">Details</zeno-divider>
<zeno-divider align="end">More</zeno-divider>

Thickness and colour

Step 2

<zeno-divider thickness="thin"></zeno-divider>
<zeno-divider thickness="medium"></zeno-divider>
<zeno-divider thickness="thick"></zeno-divider>
<zeno-divider thickness="medium" color="primary"></zeno-divider>
<zeno-divider thickness="medium" color="secondary"></zeno-divider>
<zeno-divider color="primary">Step 2</zeno-divider>

Spacing

spacing sets the margin above and below the line: none, sm, md (the default), lg or xl.

No margin under this line of text.

A small margin.

A large margin.

The last line of text.

<p>No margin under this line of text.</p>
<zeno-divider spacing="none"></zeno-divider>
<p>A small margin.</p>
<zeno-divider spacing="sm"></zeno-divider>
<p>A large margin.</p>
<zeno-divider spacing="lg"></zeno-divider>
<p>The last line of text.</p>

Vertical

A vertical divider is an inline block. Here it sits in a flex row that centres its items.

Edit Copy Delete

<div style="display: flex; align-items: center; height: 24px">
  <span>Edit</span>
  <zeno-divider orientation="vertical"></zeno-divider>
  <span>Copy</span>
  <zeno-divider orientation="vertical"></zeno-divider>
  <span>Delete</span>
</div>

Attributes and properties

Property	Attribute	Type	Default	Description
orientation	orientationreflects	'horizontal' | 'vertical'	'horizontal'
variant	variantreflects	'solid' | 'dashed' | 'dotted'	'solid'
align	alignreflects	'start' | 'center' | 'end'	'center'
spacing	spacingreflects	'none' | 'sm' | 'md' | 'lg' | 'xl'	'md'
thickness	thicknessreflects	'thin' | 'medium' | 'thick'	'thin'
color	colorreflects	'primary' | 'secondary' | 'accent'	–
indent	indent	number	–
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

This element sends no events.

Slots

Slot	Description
Default	Optional text shown in the line.

CSS parts

Part
base
content

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Accessibility

Keyboard

This element handles no keys of its own.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• Renders a <div> with role="separator" and an aria-orientation that follows orientation.
• The divider does not take focus and handles no keys.
• With prefers-contrast: more, the line uses the system colour ButtonText.

Tests and known gaps

• No tests of its own. The only check is that the element registers and renders (smoke.test.ts).
• Not checked with axe-core.
• Has no Storybook story.

9 of the 13 properties, methods, events, slots and parts above have no description in the source

• the property orientation
• the property variant
• the property align
• the property spacing
• the property thickness
• the property color
• the property indent
• the part base
• the part content

Known gaps:

• variant="dashed" and variant="dotted" do not work. The line is always solid, with or without text.
• Text in the divider sits inside role="separator". The children of a separator are presentational, so the text may not be read by a screen reader. Do not put information there that is nowhere else.
• color="primary" and color="accent" look the same.
• A vertical divider follows the height of its parent only when the parent has a set height. In other parents it is 24px high, whatever the height of the content next to it.
• indent does not make a horizontal divider shorter. The line keeps its full width and moves by the indent, so it sticks out of its parent on the far side.