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.
Dividers shouldn't be used if elements can be separated using white space.
Use whitespace primarily to separate groups of related content.
Overuse Dividers as this can cause them to lose their value and create unnecessary noise.
Use the default Gestalt Divider - 1px gray line.
Create your own divider with a different color or stroke style.
Use horizontal Dividers from edge to edge.
Inset Divider in a way that causes it to be free-floating or separated from content.
Use Dividers to separate collections of content or create the appearance of containers.
Use Dividers for decoration or to separate grouped content.
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.
If you are aligning Divider to content, ensure that it switches sides according to the content's start-end alignment.
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.
Component quality checklist
Component is available in Figma across all platforms.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.