Components

Text line divider

Displays a horizontal line with optional centered text. Ideal for visually separating sections while adding context or labels.

Divider

TextLineDivider

Component

View code

Show playground

Text

Sets the text of the divider.

 <template>
    <Divider text="Example text" />
</template>

Sets the style of the divider. Uses the DividerStyle enum.

 <template>
    <Divider :styleType="DividerStyle.PRIMARY_BRAND" />
</template>

Value	Description
`DividerStyle.NEUTRAL`	The text has a neutral color.
`DividerStyle.PRIMARY_BRAND`	The text has a primary-brand color.
`DividerStyle.SECONDARY_BRAND`	The text has a secondary-brand color.

Sets the size of the divider. Uses the DividerSize enum.

 <template>
    <Divider :size="DividerSize.SM" />
</template>

Value	Description
`DividerSize.XS`	Uses a small text size.
`DividerSize.SM`	Uses a medium text size.

Sets the alignment of the divider. Uses the Align enum.

 <template>
    <Divider :align="Align.LEFT" />
</template>

Value	Description
`Align.LEFT`	Displays the text aligned to the left with a right line divider.
`Align.CENTER`	Displays the text aligned to the center with line dividers at both sides.