Components
Divider
Display a separator between content.
Usage
You can pass label, icon or avatar to the divider component.
Label
OR
<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.
OR
OR
<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>
<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" />
<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
<template>
<UDivider label="Nuxt UI" type="dashed" />
</template>
Size
Use the size prop to change the size of the divider.
Nuxt UI
<template>
<UDivider label="Nuxt UI" size="sm" />
</template>
Color
You can change the color of the content by using the ui prop
Nuxt UI
<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
type
"solid" | "dotted" | "dashed"
"solid"size
DividerSize
config.default.size"sm""2xs""xs""md""lg""xl"ui
{ wrapper?: DeepPartial<{ base: string; horizontal: string; vertical: string; }, any>; container?: DeepPartial<{ base: string; horizontal: string; vertical: string; }, any>; ... 4 more ...; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}icon
string
nulllabel
string
nullorientation
"horizontal" | "vertical"
"horizontal"avatar
Avatar
nullConfig
{
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',
},
},
icon: {
base: 'flex-shrink-0 w-5 h-5',
},
avatar: {
base: 'flex-shrink-0',
size: '2xs',
},
label: 'text-sm',
default: {
size: '2xs',
},
}