Divider is a light gray 1px horizontal or vertical line which groups and divides content in lists and layouts.

also known as Separator, Horizontal Rule, <hr>, Rule

Figma:

Web:

iOS:

Android:

A11y:

Usage guidelines

Do

Dividers should be used to bring clarity and structure to a layout. Primarily, Dividers help to separate groups of related elements or break up dense content.

Don't

Dividers shouldn't be used if elements can be separated using white space.

Best practices

Do

Use whitespace primarily to separate groups of related content.

Don't

Overuse Dividers as this can cause them to lose their value and create unnecessary noise.

Do

Use the default Gestalt Divider - 1px gray line.

Don't

Create your own divider with a different color or stroke style.

Do

Use horizontal Dividers from edge to edge.

Don't

Inset Divider in a way that causes it to be free-floating or separated from content.

Do

Use Dividers to separate collections of content or create the appearance of containers.

Don't

Use Dividers for decoration or to separate grouped content.

Accessibility

Divider is not focusable and is treated as decorative. Screen readers on tab navigation don't announce Dividers but do announce them on left/right quick navigation.

Localization

If you are aligning Divider to content, ensure that it switches sides according to the content's start-end alignment.

Variants

Orientation

You can use this component as a vertical divider between two elements. Placing it within a Flex layout with a direction of row will shift Divider to a vertical orientation.

Horizontal
Vertical

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Ready
Component is available in Figma across all platforms.
Responsive Web
Ready
Component is available in code for web and mobile web.
iOS
Component is not currently available in code for iOS.
Android
Component is not currently available in code for Android.