Divider

Display a separator between content.

Usage

You can pass label, icon or avatar to the divider component.

Label

<template>
  <UDivider label="OR" />
</template>

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.

<template>
  <UDivider icon="i-simple-icons-github" />
</template>

Avatar

Use the avatar prop as an object and configure it with any of its props.

<template>
  <UDivider 
    :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }"
  />
</template>

Orientation

You can change the orientation of the divider by setting the orientation prop to horizontal or vertical. Defaults to horizontal.

<script setup lang="ts">
const form = reactive({ email: 'mail@example.com', password: 'password' })
</script>

<template>
  <div class="w-full flex flex-col gap-y-4">
    <UCard :ui="{ body: { base: 'grid grid-cols-3' } }">
      <div class="space-y-4">
        <UFormGroup label="Email" name="email">
          <UInput v-model="form.email" />
        </UFormGroup>

        <UFormGroup label="Password" name="password">
          <UInput v-model="form.password" type="password" />
        </UFormGroup>

        <UButton label="Login" color="gray" block />
      </div>

      <UDivider label="OR" orientation="vertical" />

      <div class="space-y-4 flex flex-col justify-center">
        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
      </div>
    </UCard>
  </div>
</template>

Type

You can change the type of the divider by setting the type prop to solid, dotted or dashed. Defaults to solid.

<template>
  <UDivider label="Nuxt UI" type="dashed" />
</template>

Size

Use the size prop to change the size of the divider.

<template>
  <UDivider label="Nuxt UI" size="sm" />
</template>

Color

You can change the color of the content by using the ui prop

<template>
  <UDivider
    label="Nuxt UI"
    :ui="{ label: 'text-primary-500 dark:text-primary-400' }"
  />
</template>

Slots

default

Use the default slot to add content to the divider.

<template>
  <UDivider>
    <Logo class="w-28 h-6" />
  </UDivider>
</template>

Props

Prop	Type	Default	Description
type	"solid" | "dotted" | "dashed"	"solid"	Divider border type
size	DividerSize	"md"	Divider size
label	string	null	Label text
icon	string	null	Icon name
ui	Object	{}	Custom UI configuration
orientation	"horizontal" | "vertical"	"horizontal"	Divider orientation
avatar	Avatar	null	Avatar configuration

Config

{
  wrapper: {
    base: 'flex items-center align-center text-center',
    horizontal: 'w-full flex-row',
    vertical: 'flex-col'
  },
  container: {
    base: 'font-medium text-gray-700 dark:text-gray-200 flex',
    horizontal: 'mx-3 whitespace-nowrap',
    vertical: 'my-2'
  },
  border: {
    base: 'flex border-gray-200 dark:border-gray-800',
    horizontal: 'w-full',
    vertical: 'h-full',
    size: {
      horizontal: {
        '2xs': 'border-t',
        xs: 'border-t-[2px]',
        sm: 'border-t-[3px]',
        md: 'border-t-[4px]',
        lg: 'border-t-[5px]',
        xl: 'border-t-[6px]'
      },
      vertical: {
        '2xs': 'border-s',
        xs: 'border-s-[2px]',
        sm: 'border-s-[3px]',
        md: 'border-s-[4px]',
        lg: 'border-s-[5px]',
        xl: 'border-s-[6px]'
      }
    },
    type: {
      solid: 'border-solid',
      dotted: 'border-dotted',
      dashed: 'border-dashed'
    }
  },
  // Additional configuration options...
}