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'.