layout
Divider
Display a separator between content.
Usage
You can pass label, icon or avatar to the divider component.
Label
OR
<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.
OR
OR
<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.
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
nullicon
string
nullui
any
undefinedavatar
any
nullorientation
"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"}