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.