Divider

Use to separate or group content

Alpha

This component and its documentation is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.

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" fullWidth>
      <Text as="h1" variant="headingXs">
        Base
      </Text>
      <Divider borderStyle="base" />
      <Text as="h1" variant="headingXs">
        Dark
      </Text>
      <Divider borderStyle="dark" />
      <Text as="h1" variant="headingXs">
        Divider
      </Text>
      <Divider borderStyle="divider" />
      <Text as="h1" variant="headingXs">
        Divider on dark
      </Text>
      <Divider borderStyle="divider-on-dark" />
      <Text as="h1" variant="headingXs">
        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.