Divider

Also known as

Separator

Divider provides a thin, unobtrusive line for grouping elements to reinforce visual hierarchy.

Density
Mode

Divider has three variants: primary, secondary and tertiary. The default variant is primary. You can use the variant prop to change

  • Primary dividers meet the 3:1 contrast ratio against Salt backgrounds, needed for graphical elements in WCAG 2.1. They are ideal to distinguish between interactive elements or between distinct interactions.
  • Secondary dividers are ideal to distinguish between regions and containers.
  • Tertiary dividers are suitable for less prominent separations between repeated elements, where a softer distinction is desired.