Divider - Nuxt UI

Usage

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

Label

label

<UDivider label="OR" />

Icon

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

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

Avatar

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

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

Orientation

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

Password

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

type

Nuxt UI

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

Size

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

Nuxt UI

<UDivider
  label="Nuxt UI"
  :ui="{ border: { size: { horizontal: 'border-t-2' } } }"
/>

Color

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

Nuxt UI

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

Slots

`default`

Use the default slot to add content to the divider.

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

Props

type

"solid" | "dotted" | "dashed"

"solid"

label

string

null

icon

string

null

any

undefined

avatar

any

null

orientation

"horizontal" | "vertical"

"horizontal"

Config

UDivider.vue

{
  "wrapper": {
    "base": "flex items-center align-center text-center w-full",
    "horizontal": "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": "border-t",
      "vertical": "border-s"
    }
  },
  "icon": {
    "base": "flex-shrink-0 w-5 h-5"
  },
  "avatar": {
    "base": "flex-shrink-0",
    "size": "2xs"
  },
  "label": "text-sm"
}

Skeleton

Display a placeholder while content is loading.

Setup

Learn how to install Nuxt UI Pro in your Nuxt application.