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 style can be adjusted using the Shape tokens.

import React from 'react';
import {Divider, Text, AlphaStack} from '@shopify/polaris';


function DividerWithBorderStylesExample() {
  return (
    <AlphaStack gap="5">
      <Text as="p" variant="bodyMd">
        Base
      </Text>
      <Divider borderStyle="base" />
      <Text as="p" variant="bodyMd">
        Dark
      </Text>
      <Divider borderStyle="dark" />
      <Text as="p" variant="bodyMd">
        Divider
      </Text>
      <Divider borderStyle="divider" />
      <Text as="p" variant="bodyMd">
        Divider on dark
      </Text>
      <Divider borderStyle="divider-on-dark" />
      <Text as="p" variant="bodyMd">
        Transparent
      </Text>
      <Divider borderStyle="transparent" />
    </AlphaStack>
  );
}

Props

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

interface DividerProps

borderStyle?'base' | 'dark' | 'divider' | 'divider-on-dark' | 'transparent': Divider border style.