Divider

Use to separate or group content.

Alpha

This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about our component lifecycles.

Divider border color can be adjusted using the Color tokens.

import React from 'react';

import {Card, Divider, Text, VerticalStack} from '@shopify/polaris';


function DividerWithBorderColorExample() {
  return (
    <Card>
      <VerticalStack gap="500">
        <Text as="h1" variant="headingXs">
          Default
        </Text>
        <Divider />
        <Text as="h1" variant="headingXs">
          Border
        </Text>
        <Divider borderColor="border" />
        <Text as="h1" variant="headingXs">
          Border inverse
        </Text>
        <Divider borderColor="border-inverse" />
        <Text as="h1" variant="headingXs">
          Transparent
        </Text>
        <Divider borderColor="transparent" />
      </VerticalStack>
    </Card>
  );
}

Props

Want to help make this feature better? Please share your feedback.

interface DividerProps

borderColor?ColorBorderAlias | "transparent": Divider border color.
Defaults to 'border-subdued'.
borderWidth?BorderWidthScale: Divider border width.
Defaults to '1'.