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>

Variants

The divider supports different fill colors: default (muted), primary (has a thicker stroke (2px)), and on-contrast. When no variant is set, the divider renders with the default muted color.

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

<div class="tng-divider on-contrast"></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

To draw only one edge, use .has-edge-start for the leading edge or .has-edge-end for the trailing edge. .has-edge is equivalent to applying both.

<ol class="tng-has-dividers has-edge-start" 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

<ol class="tng-has-dividers has-edge-end" 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	✅
variant	Variant	Defines the layout variant: 'is-primary' | 'on-contrast'. If not set, defaults to muted color.	✅
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"
      variant="is-primary"
      className="custom-divider"
    />
  );
};

export { DividerExample };