Divider

A Divider is a visual element used to separate groups of content. It helps create structure, improve readability, and guide the user’s eye through sections of a layout.

Design

A Divider is a simple visual element used to separate groups of content. It helps create structure, improve readability, and guide the user’s eye through sections of a layout. Dividers can be horizontal or vertical depending on the layout needs.

When to use it (and when not to)

Use a Divider when you need to:

• Separate sections of content within the same page or container.
• Create visual grouping inside cards, sidebars, lists, or forms.
• Provide a subtle break between related UI elements without introducing heavy visual noise.
• Clarify hierarchy when headings or spacing alone are not enough.

Avoid using a Divider when:

• Spacing alone is enough to create separation — generous padding or margins make the interface cleaner than adding a line.
• You want to show a change in context, navigation, or a major layout transition — use headers, subheaders, or layout components instead.
• You need to separate components with very strong contrast or visual weight — dividers may feel too subtle.
• You are trying to fix clutter — dividers shouldn’t compensate for an overcrowded layout.

Quick summary of accessibility & consistency

Although dividers are primarily decorative, accessibility still matters:

• Use semantic elements when appropriate: <hr> for horizontal dividers that represent a thematic break or section separation, or a decorative container (e.g., <div role="separator">) for dividers that are visual only.
• Ensure the divider has sufficient color contrast against the background if it conveys meaning (WCAG 1.4.11).
• Vertical dividers should use role="separator" so assistive technologies can interpret them correctly.
• Avoid adding text alternatives unless the divider communicates meaningful structure.
• Keep dividers out of the tab order; they should not be focusable.

Properties

Position

Horizontal

Divider

Width: 100%

Height: Stroke width (1px or 2px)

Vertical

Divider

Height: 80

Width: 1

Fill

Muted

Divider

Background color: #A8AAAC

Contrast

Divider

Background color: #E4E4E4

Red

Divider

Background color: #FF0022

Min width: 40

Blue

Divider

Background color: #0072F0

Min width: 40

Styling

Colors

Name	Applied as	Applied to
color-border-neutral-default	Border color	Divider
color-border-neutral-default	Border color	Divider
color-border-neutral-muted	Border color	Divider
color-border-neutral-muted	Border color	Divider
color-border-primary-default	Border color	Divider
color-border-primary-default	Border color	Divider

Usage

Do

Guidance on how to use a component.

• Use dividers sparingly to avoid visual clutter.
• Ensure consistent alignment with surrounding content (grid, spacing, containers).
• Choose orientation intentionally: horizontal for content flow, vertical inside toolbars, sidebars, or menus.
• Match color and weight to the design system tokens.
• Use semantic meaning when relevant, like separating list items or form sections.

Don’t

Guidance on what to avoid when using a component.

• Don’t overuse dividers to fix unclear layout hierarchy. Structure should come from spacing and typography first.
• Don’t mix multiple styles of dividers in the same view.
• Don’t use dividers to replace headings or labels — they only provide visual separation, not meaning.
• Don’t place dividers too close to content, which makes the UI feel cramped.

Develop

Styles

A Divider is a visual element used to separate groups of content. It helps create structure, improve readability, and guide the user’s eye through sections of a layout.

<div class="tng-divider"></div>

Schemes

The divider supports different fill colors. The primary variant has a thicker stroke (2px).

<div class="tng-divider"></div>
<div class="tng-divider is-primary"></div>

<div class="tng-divider on-contast"></div>

Container Pattern

Use .tng-has-dividers on a container to add border dividers between child elements.

<ul class="tng-has-dividers" role="list">
  <li class="p-md">First item</li>
  <li class="p-md">Second item</li>
  <li class="p-md">Third item</li>
</ul>

• First item
• Second item
• Third item

Add .has-edge to also draw dividers on the container’s leading and trailing edges.

<ol class="tng-has-dividers has-edge" role="list">
  <li class="p-md">First item</li>
  <li class="p-md">Second item</li>
  <li class="p-md">Third item</li>
</ol>

1. First item
2. Second item
3. Third item

Orientation

Use .is-inline for vertical dividers. The divider will stretch to fill the available height.

<div class="tng-divider is-inline"></div>
<div class="tng-divider is-inline is-primary"></div>

Modules

Divider under heading

<header class="tng-stack">
  <h2 class="mbe-4xl | tng-text-title is-5">Title Heading</h2>
  <div class="tng-divider is-primary" style="inline-size: 40px"></div>
</header>

Title Heading

Vertical divider in nav menu

<nav class="tng-group gap-2xl">
  <a href="#" class="tng-link">Home</a>
  <a href="#" class="tng-link">Products</a>
  <div class="tng-divider is-inline" role="separator"></div>
  <a href="#" class="tng-link">Account</a>
  <a href="#" class="tng-link">Sign out</a>
</nav>

Home Products

Account Sign out

React

Import the Divider component from @tmedxp/react-components.

Properties

Prop	Type	Description	Optional
orientation	Orientation	Defines the divider orientation: 'horizontal' | 'vertical', 'horizontal' by default	✅
fillVariant	FillVariant	Defines the layout variant: 'primary'	✅
testId	string	Defines the test id attribute value	✅
as	ValidHTMLTags	Defines the html tag to use: 'hr' | 'div', 'div' by default	✅
className	ClassValue	Custom class names applied to the divider element	✅

Example

import { Divider } from '@tmedxp/react-components';

const DividerExample = () => {
  return (
    <Divider
      orientation="vertical"
      fillVariant="primary"
      className="custom-divider"
    />
  );
};

export { DividerExample };

Accessibility

For designers

Accessibility compliance for Toyota:

Type	Fill Colour	Bg Colour	Contrast Ratio	Passes WCAG AA?
Muted	#A8AAAC	#FFFFFF	2.33:1	✅ Yes
Contrast	#E4E4E4	#FFFFFF	1.27:1	✅ Yes
Red	#FF0022	#FFFFFF	3.98:1	✅ Yes
Blue	#0072F0	#FFFFFF	4.5:1	✅ Yes

For developers

Semantic markup

• Use <hr> for horizontal dividers that represent a thematic break or section separation. Screen readers announce it as a “separator”.
• For vertical or purely decorative dividers, use a <div> with role="separator" so assistive technologies can identify the boundary.
• If a divider is purely cosmetic (e.g. a border between navigation links), use role="presentation" or aria-hidden="true" to remove it from the accessibility tree.