Divider

The BDivider component is used to separate sections of lists or layouts.

Horizontal and vertical divider

There are two variants. Horizontal (default) and vertical. To get the vertical variant add vertical to the component

Horizontal

<script setup lang="ts">
import { ref } from 'vue'

const mode = ref<boolean>(false)
</script>

<template>
  <div class="flex items-center w-full h-72">
    <BDivider :vertical="mode" />
  </div>

  <div class="w-50 flex justify-between items-center">
    <BSwitchGroup>
      <BSwitchLabel class="font-medium">
        {{ mode ? 'Vertical' : 'Horizontal' }}
      </BSwitchLabel>
      <BSwitch v-model="mode" />
    </BSwitchGroup>
  </div>
</template>

Centered label

To add a label to the divider, use the label prop or the default slot. The label will be centered on the divider. Currently only supported for the horizontal variant. To make it wor you also need to add a matching background color via CSS

divider text

<script setup lang="ts">

</script>

<template>
  <div class="flex items-center w-full h-72">
    <BDivider
      class="bg-white"
      label="divider text"
    />
  </div>
</template>

Accessability

BDivider has a role=separator and an aria-orientation of horizontal or vertical depending on orientation