ui/docs/content/7.layout/4.divider.md

description, links, navigation

description	links	navigation
Display a separator between content.	label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Divider.vue	badge New

Usage

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

Label

::component-card

props: label: OR

::

Icon

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

::component-card

props: icon: 'i-simple-icons-github' excludedProps:

• icon

---

::

Avatar

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

::component-card

props: avatar: src: https://avatars.githubusercontent.com/u/739984?v=4 excludedProps:

• avatar

---

::

Orientation

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

::component-example #default :divider-example-orientation

#code

<script setup>
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" color="gray" 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>

    <UCard>
      <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 />

        <UDivider label="OR" color="gray" />

        <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.

::component-card

props: label: Nuxt UI type: dashed excludedProps:

• label

---

::

Size

You can change the size of the divider by using the ui prop

::component-card

props: label: Nuxt UI ui: border: size: horizontal: border-t-2 excludedProps:

• label
• ui

---

::

Color

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

::component-card

props: label: Nuxt UI ui: label: text-primary-500 dark:text-primary-400 excludedProps:

• label
• ui

---

::

Slots

default

Use the default slot to add content to the divider.

::component-example #default :divider-example-default-slot #code

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

::

Props

:component-props

Preset

:component-preset