Divider

Default

Add a horizontal line between blocks of content with s-divider.

Code copied

<template>
  <div class="center">
    <p>Content above the divider.</p>
    <s-divider />
    <p>Content below the divider.</p>
  </div>
</template>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Text

Place text inside the divider to label a section break.

Code copied

<template>
  <div class="center">
    <s-divider>My Text</s-divider>
  </div>
</template>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Text Position

Control text alignment with the position prop: left, left-center, center, right-center, or right.

Code copied

<template>
  <div class="center">
    <s-divider position="left">left</s-divider>
    <s-divider position="left-center">left-center</s-divider>
    <s-divider position="center">center</s-divider>
    <s-divider position="right-center">right-center</s-divider>
    <s-divider position="right">right</s-divider>
  </div>
</template>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Color

Change the color of the line and the text using theme colors, RGB, or HEX.

Code copied

<template>
  <div class="center">
    <s-divider>Default</s-divider>
    <s-divider color="primary">Primary</s-divider>
    <s-divider color="success">Success</s-divider>
    <s-divider color="danger">Danger</s-divider>
    <s-divider color="warning">Warning</s-divider>
    <s-divider color="dark">Dark</s-divider>
    <s-divider color="rgb(29, 222, 194)">RGB</s-divider>
    <s-divider color="#ad289f">HEX</s-divider>
  </div>
</template>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Background

Highlight divider text with a custom background color.

Code copied

<template>
  <div class="center">
    <s-divider>Default</s-divider>
    <s-divider background="primary" color="#ade6d4">Primary</s-divider>
    <s-divider background="success" color="#0a540a">Success</s-divider>
    <s-divider background="danger" color="lightcoral">Danger</s-divider>
    <s-divider background="warning" color="grey">Warning</s-divider>
    <s-divider background="dark" color="lightgrey">Dark</s-divider>
    <s-divider background="rgb(252, 243, 192)" color="rgb(29, 222, 194)"
      >RGB</s-divider
    >
    <s-divider background="#fffaaa" color="#ad289f">HEX</s-divider>

</template>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;

Icons

Use Material Icons inside the divider via the icon prop.

Code copied

<template>
  <div class="center">
    <s-divider icon="cb:arrow-down" />
    <s-divider color="primary" icon="cb:star" />
    <s-divider color="success" icon="cb:checkmark" />
    <s-divider color="danger" icon="cb:trash-can" />
    <s-divider color="warning" icon="cb:warning" />
    <s-divider color="dark" icon="cb:time" />
  </div>
</template>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Style

Switch line appearance with border-style (solid, dashed, dotted).

Code copied

<template>
  <div class="center">
    <s-divider border-style="dotted" color="dark">dotted</s-divider>
    <s-divider border-style="dashed" color="dark">dashed</s-divider>
    <s-divider border-style="solid" color="dark">solid</s-divider>
  </div>
</template>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

API