Divider ​

Separates content visually, either horizontally or vertically. It can also host a small inline action.

Examples ​

vue
<template>
  <div class="w-full items-center grid gap-6 !p-6">
    <Story title="Divider Examples" :layout="{ width: 480 }">
      <Variant title="Default">
        <div class="space-y-3">
          <p class="text-base text-ink-gray-7">Section above</p>
          <Divider />
          <p class="text-base text-ink-gray-7">Section below</p>
        </div>
      </Variant>

      <Variant title="In a flex row">
        <div class="flex h-16 items-center gap-4">
          <span class="text-base text-ink-gray-7">Left</span>
          <Divider orientation="vertical" flex-item />
          <span class="text-base text-ink-gray-7">Right</span>
        </div>
      </Variant>
    </Story>
  </div>
</template>

<script setup lang="ts">
import { Divider } from 'frappe-ui'
</script>

Action ​

vue
<template>
  <div class="w-full items-center grid gap-6 !p-6">
    <Story title="Divider Action" :layout="{ width: 480 }">
      <Variant title="Action button">
        <div class="space-y-3">
          <p class="text-base text-ink-gray-7">Older items</p>
          <Divider :action="{ label: 'Load more', onClick }" />
          <p class="text-base text-ink-gray-7">Newer items</p>
        </div>
      </Variant>

      <Variant title="Vertical action">
        <div class="flex h-32 items-center gap-4">
          <span class="text-base text-ink-gray-7">Panel A</span>
          <Divider
            orientation="vertical"
            flex-item
            position="center"
            :action="{ label: 'Edit', onClick }"
          />
          <span class="text-base text-ink-gray-7">Panel B</span>
        </div>
      </Variant>
    </Story>
  </div>
</template>

<script setup lang="ts">
import { Divider } from 'frappe-ui'

function onClick() {
  console.log('divider action clicked')
}
</script>

API Reference ​

Show types
typescript
interface DividerAction {
  label: string
  onClick?: () => any
  /** @deprecated Use onClick instead. */
  handler?: () => any
  loading?: boolean
}

export interface DividerProps {
  orientation?: 'horizontal' | 'vertical'
  position?: 'start' | 'center' | 'end'
  flexItem?: boolean
  action?: DividerAction
}
orientation
= "horizontal"
"horizontal" | "vertical"
position
= "center"
"start" | "center" | "end"
flexItem
boolean
action
DividerAction
DialogDropdown