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{component="divider-example-orientation"}

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{component="divider-example-default-slot"}

Props

:component-props

Config

:component-preset