Divider

View source on GitHub

See recent changes on GitHub

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:

Ready

Responsive:

Ready

Adaptive:

N/A

Usage guidelines

When to use

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.

When not to use

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

Best practices

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.

Use the default Gestalt Divider - 1px gray line.

Don't

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

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.

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

import { Box, Divider, Flex, Heading, Text } from 'gestalt';

function Block({ title, text }) {
  return (
    <Flex direction="column" gap={{ column: 2, row: 0 }}>
      <Heading accessibilityLevel="none" size="400">
        {title}
      </Heading>
      <Text size="200">{text}</Text>
    </Flex>
  );
}

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex direction="column" gap={{ column: 10, row: 0 }}>
        <Block
          text="Use the search bar to discover ideas, people and trends. Explore suggested topics or search for topics of your own."
          title="Discover ideas"
        />
        <Divider />
        <Block
          text="Upload an image from your computer or mobile device to create a Pin. You can also create Pins from images you find online."
          title="Create Pins"
        />
      </Flex>
    </Box>
  );
}

Vertical

import { Box, Divider, Flex, Heading, Text } from 'gestalt';

function Block({ title, text }) {
  return (
    <Flex direction="column" gap={{ column: 2, row: 0 }}>
      <Heading accessibilityLevel="none" size="400">
        {title}
      </Heading>
      <Text size="200">{text}</Text>
    </Flex>
  );
}

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex>
        <Box paddingX={4}>
          <Block
            text="Use the search bar to discover ideas, people and trends. Explore suggested topics or search for topics of your own."
            title="Discover ideas"
          />
        </Box>
        <Divider />
        <Box paddingX={4}>
          <Block
            text="Upload an image from your computer or mobile device to create a Pin. You can also create Pins from images you find online."
            title="Create Pins"
          />
        </Box>
      </Flex>
    </Box>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library	Ready	Component is available in Figma for web and mobile web.
Responsive Web	Ready	Component responds to changing viewport sizes in web and mobile web.

Edit page on GitHub