Skip to content

role presentation

Divider draft v0.1.0

A thin line that separates two groups of content.

A divider is a hairline between two sections of content or two groups of controls: between items of a list, between a header and a body, between the actions of a toolbar. It is horizontal by default and vertical inside a row. A divider says that a topic or a group changes; spacing alone often says it as well, so a divider is used when the separation must be seen.

Web implementation

Root .ds-divider on a <hr>. Properties map to attributes: orientation → data-orientation

packages/components/src/components/divider/divider.css 
/*
 * Divider — vanilla CSS reference implementation.
 * Spec:   packages/components/specs/components/divider.spec.json
 * Tokens: packages/tokens/dist/css/components/divider.css (generated from packages/tokens/src/components/divider.tokens.json)
 *
 * Rules:
 *  - Only --divider-* custom properties may appear here. No raw values, no semantic tokens.
 *  - The root is an hr; the line is its block-start (horizontal) or inline-start (vertical) border.
 *  - Orientation is a data attribute; a divider has no interaction state.
 */

.ds-divider {
  box-sizing: border-box;
  display: block;
  inline-size: 100%;
  margin-block: var(--divider-container-margin-block-horizontal);
  margin-inline: 0;
  border: none;
  border-block-start: var(--divider-container-border-width) solid var(--divider-container-color);
}

.ds-divider[data-orientation="vertical"] {
  display: inline-block;
  align-self: stretch;
  inline-size: 0;
  min-block-size: var(--divider-container-min-height-vertical);
  margin-block: 0;
  margin-inline: var(--divider-container-margin-inline-vertical);
  border-block-start: none;
  border-inline-start: var(--divider-container-border-width) solid var(--divider-container-color);
  vertical-align: middle;
}
packages/components/src/components/divider/divider.template.mjs 
/**
 * Divider — HTML template for the web implementation.
 * Pure function of the spec properties (packages/components/specs/components/divider.spec.json) -> HTML string.
 * An hr: a thematic break with the implicit separator role; a vertical divider says so with
 * aria-orientation, a property of the separator role.
 */
import { escapeAttr } from '../../lib/template-utils.mjs';

export const meta = { id: 'divider', selector: '.ds-divider' };

export function render(props = {}) {
  const { orientation = 'horizontal', state = null } = props;
  const attrs = ['class="ds-divider"', `data-orientation="${escapeAttr(orientation)}"`];
  if (orientation === 'vertical') attrs.push('aria-orientation="vertical"');
  if (state && state !== 'default') attrs.push(`data-state="${escapeAttr(state)}"`);
  return `<hr ${attrs.join(' ')}>`;
}

No other platform implementation recorded yet. Platform token outputs live under Platforms.