Divider

View source on GitHub

; Opens a new tab

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:

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

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

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

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

Usage guidelines

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

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

Ready

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.

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

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

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

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

Horizontal

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

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

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

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

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.

Edit page on GitHub

; Opens a new tab