Skip to content

Divider

Use to separate or group content.

Divider border color can be adjusted using the Color tokens.

vue
<template>
<Card>
  <BlockStack gap="500">
    <Text as="h1" variant="headingSm">
      Default
    </Text>
    <Divider />
    <Text as="h1" variant="headingSm">
      Border
    </Text>
    <Divider borderColor="border" />
    <Text as="h1" variant="headingSm">
      Border inverse
    </Text>
    <Divider borderColor="border-inverse" />
    <Text as="h1" variant="headingSm">
      Transparent
    </Text>
    <Divider borderColor="transparent" />
  </BlockStack>
</Card>
</template>

Props

No props found for this component, run `yarn gen:docs` to generate component meta first.

Released under the MIT License.