RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Divider

Divide something.

Simple Divider

Place HLDivider between blocks of content to draw a horizontal separator line.

Above the divider

Below the divider

<template>
  Above the divider
  <HLDivider />
  Below the divider
</template>

<script setup lang="ts">
  import { HLDivider } from '@platform-ui/highrise'
</script>

With Text

Pass content into the default slot to add a label, and use titlePlacement to position it left, center, or right.

Center

Left

Right

<template>
  <HLDivider> Center </HLDivider>
  <HLDivider titlePlacement="left"> Left </HLDivider>
  <HLDivider titlePlacement="right"> Right </HLDivider>
</template>

<script setup lang="ts">
  import { HLDivider } from '@platform-ui/highrise'
</script>

INFO

titlePlacement is direction-aware: in RTL layouts left and right are automatically flipped, so a left-placed title stays on the reading-start side.

Margins

By default the divider has vertical margin on both sides. Set marginTop or marginBottom to false to remove the spacing on that edge. These props apply to horizontal dividers only — for a vertical divider, control spacing with an inline style / margin instead.

Paragraph above the first divider.

With Margins

Paragraph between dividers.

No Top Margin

Paragraph between dividers.

No Bottom Margin

Paragraph below the last divider.

<template>
  <p style="margin: 0">Paragraph above the first divider.</p>
  <HLDivider> With Margins </HLDivider>
  <p style="margin: 0">Paragraph between dividers.</p>
  <HLDivider :marginTop="false"> No Top Margin </HLDivider>
  <p style="margin: 0">Paragraph between dividers.</p>
  <HLDivider :marginBottom="false"> No Bottom Margin </HLDivider>
  <p style="margin: 0">Paragraph below the last divider.</p>
</template>

<script setup lang="ts">
  import { HLDivider } from '@platform-ui/highrise'
</script>

Vertical Divider

Add vertical to separate inline content. Give the divider a height so it has something to span.

Text

Text

<template>
  <div style="display: flex; align-items: center; height: 200px">
    Text
    <HLDivider vertical style="height: 150px; margin: 0 8px" />
    <HLDivider vertical style="height: 120px; margin: 0 8px" />
    <HLDivider vertical style="height: 100px; margin: 0 8px" />
    Text
  </div>
</template>

<script setup lang="ts">
  import { HLDivider } from '@platform-ui/highrise'
</script>

Dashed Divider

Add dashed to render the line as a dashed stroke instead of solid.

Above the divider

Below the divider

<template>
  Above the divider
  <HLDivider dashed />
  Below the divider
</template>

<script setup lang="ts">
  import { HLDivider } from '@platform-ui/highrise'
</script>

Passthrough attributes

HLDivider renders a single root element and inherits attributes, so class, style, data-*, role, and aria-* you set on the tag land directly on it. This is the idiomatic way to override spacing or width:

Above the divider

Below the divider

<template>
  Above the divider
  <HLDivider class="!m-0" style="width: 100%" data-testid="section-break" />
  Below the divider
</template>

<script setup lang="ts">
  import { HLDivider } from '@platform-ui/highrise'
</script>

Accessibility

• HLDivider already sets aria-orientation from the vertical prop, so you don't need to add it yourself. Add role="separator" when the divider communicates document structure rather than being purely decorative.
• When you pass content into the default slot, HLDivider automatically wires aria-labelledby to that caption, so you don't need to set it yourself. For a divider with no visible label, add your own aria-label, or mark it aria-hidden="true" so it stays decorative.

Imports

import { HLDivider } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id	string	Auto (hr-divider-*)	The id of the element. Generated automatically when omitted.
titlePlacement	'left' | 'right' | 'center'	'center'	The position of the title within the divider
dashed	boolean	false	Whether the divider is dashed
vertical	boolean	false	Whether the divider is vertical
marginTop	boolean	true	Whether to apply a margin at the top
marginBottom	boolean	true	Whether to apply a margin at the bottom

Slots

Name	Parameters	Description
default	()	The default content slot