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"ui
any
undefinedlabel
string
nullicon
string
nullavatar
any
nullorientation
"horizontal" | "vertical"
"horizontal"Config
{
"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"
}