Divider

Description

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, e.g., 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.

Component

Properties

Prop	Type	Description	Optional
orientation	Orientation	Defines the divider orientation: 'horizontal' | 'vertical', 'horizontal' by default	✅
fillVariant	FillVariant	Defines the layout variant: 'ev' | '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 };