---
title: Separator
desc: >-
  The QSeparator Vue component is used to separate sections of text or other
  components or elements. It creates a colored line across the width of the
  parent. It can be horizontal or vertical.
---
The QSeparator component is used to separate sections of text, other components, etc... It creates a colored line across the width of the parent. It can be horizontal or vertical.

## QSeparator API

### Props

- `dark` (boolean, optional), default `null`
  Notify the component that the background is a dark color
- `spaced` (boolean | string, optional)
  If set to true, the corresponding direction margins will be set to 8px; It can also be set to a size in CSS units, including unit name, or one of the xs|sm|md|lg|xl predefined sizes
  Examples: `'12px'`, `'sm'`, `'md'`
- `inset` (boolean | string, optional)
  If set to Boolean true, the left and right margins will be set to 16px. If set to 'item' then it will match a QItem's design. If set to 'item-thumbnail' then it will match the design of a QItem with a thumbnail on the left side
  Accepts: `true`, `false`, `'item'`, `'item-thumbnail'`
- `vertical` (boolean, optional)
  If set to true, the separator will be vertical.
- `size` (string, optional)
  Size in CSS units, including unit name
  Examples: `'16px'`, `'2rem'`
- `color` (string, optional)
  Color name for component from the Quasar Color Palette
  Examples: `'primary'`, `'teal'`, `'teal-10'`

## Usage

Take the following just as examples. Doesn't mean you can use QSeparator only on QCard, QList or QToolbar.

### Horizontal

```vue
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <q-card flat bordered style="max-width: 250px">
        <q-card-section>
          <div class="text-h6">Our Changing Planet</div>
          <div class="text-subtitle2">by John Doe</div>
        </q-card-section>

        <q-separator />

        <q-card-actions>
          <q-btn label="Share" color="primary" flat />
          <q-btn label="Comment" color="secondary" flat />
        </q-card-actions>
      </q-card>

      <q-list
        class="bg-grey-9 text-white shadow-2 rounded-borders"
        style="max-width: 250px; width: 100%"
      >
        <q-item>
          <q-item-section avatar>
            <q-avatar>
              <img
                alt="User avatar"
                src="https://cdn.quasar.dev/img/avatar6.jpg"
              />
            </q-avatar>
          </q-item-section>
          <q-item-section>Jane</q-item-section>
        </q-item>

        <q-separator dark />

        <q-item>
          <q-item-section avatar>
            <q-avatar>
              <img
                alt="User avatar"
                src="https://cdn.quasar.dev/img/avatar3.jpg"
              />
            </q-avatar>
          </q-item-section>
          <q-item-section>Lily</q-item-section>
        </q-item>

        <q-item>
          <q-item-section avatar>
            <q-avatar>
              <img
                alt="User avatar"
                src="https://cdn.quasar.dev/img/avatar5.jpg"
              />
            </q-avatar>
          </q-item-section>
          <q-item-section>Mary</q-item-section>
        </q-item>
      </q-list>
    </div>
  </div>
</template>
```

### Horizontal with inset

```vue
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <q-card flat bordered style="max-width: 250px">
        <q-card-section>
          <div class="text-h6">Our Changing Planet</div>
          <div class="text-subtitle2">by John Doe</div>
        </q-card-section>

        <q-separator inset />

        <q-card-section>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </q-card-section>
      </q-card>

      <q-list
        class="shadow-2 rounded-borders"
        style="max-width: 250px; width: 100%"
      >
        <q-item>
          <q-item-section avatar>
            <q-avatar>
              <img
                alt="User avatar"
                src="https://cdn.quasar.dev/img/avatar6.jpg"
              />
            </q-avatar>
          </q-item-section>
          <q-item-section>Jane</q-item-section>
        </q-item>

        <q-separator inset="item" />

        <q-item>
          <q-item-section avatar>
            <q-avatar>
              <img
                alt="User avatar"
                src="https://cdn.quasar.dev/img/avatar3.jpg"
              />
            </q-avatar>
          </q-item-section>
          <q-item-section>Lily</q-item-section>
        </q-item>

        <q-item>
          <q-item-section avatar>
            <q-avatar>
              <img
                alt="User avatar"
                src="https://cdn.quasar.dev/img/avatar5.jpg"
              />
            </q-avatar>
          </q-item-section>
          <q-item-section>Mary</q-item-section>
        </q-item>
      </q-list>

      <q-list
        class="shadow-2 rounded-borders"
        style="max-width: 250px; width: 100%"
      >
        <q-item>
          <q-item-section thumbnail>
            <img
              alt="Mountains"
              src="https://cdn.quasar.dev/img/mountains.jpg"
            />
          </q-item-section>
          <q-item-section>Mountains</q-item-section>
        </q-item>

        <q-separator inset="item-thumbnail" />

        <q-item>
          <q-item-section thumbnail>
            <img
              alt="Landscape photo"
              src="https://cdn.quasar.dev/img/parallax1.jpg"
            />
          </q-item-section>
          <q-item-section>Venice</q-item-section>
        </q-item>

        <q-item>
          <q-item-section thumbnail>
            <img
              alt="Landscape photo"
              src="https://cdn.quasar.dev/img/parallax2.jpg"
            />
          </q-item-section>
          <q-item-section>The Bridge</q-item-section>
        </q-item>
      </q-list>

      <q-list
        class="bg-grey-9 text-white shadow-2 rounded-borders"
        style="max-width: 250px; width: 100%"
      >
        <q-item>
          <q-item-section avatar>
            <q-avatar>
              <img
                alt="User avatar"
                src="https://cdn.quasar.dev/img/avatar6.jpg"
              />
            </q-avatar>
          </q-item-section>
          <q-item-section>Jane</q-item-section>
        </q-item>

        <q-separator inset dark />

        <q-item>
          <q-item-section avatar>
            <q-avatar>
              <img
                alt="User avatar"
                src="https://cdn.quasar.dev/img/avatar3.jpg"
              />
            </q-avatar>
          </q-item-section>
          <q-item-section>Lily</q-item-section>
        </q-item>

        <q-item>
          <q-item-section avatar>
            <q-avatar>
              <img
                alt="User avatar"
                src="https://cdn.quasar.dev/img/avatar5.jpg"
              />
            </q-avatar>
          </q-item-section>
          <q-item-section>Mary</q-item-section>
        </q-item>
      </q-list>
    </div>
  </div>
</template>
```

### Vertical

```vue
<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-toolbar class="bg-orange shadow-2 rounded-borders">
        <q-btn flat round dense icon="menu" class="q-mr-sm" />

        <q-separator vertical inset />

        <q-btn stretch flat label="Link" />

        <q-space />

        <q-btn stretch flat label="Link" />

        <q-separator vertical />

        <q-btn stretch flat label="Link" />

        <q-separator vertical />

        <q-btn stretch flat label="Link" />
      </q-toolbar>

      <q-toolbar class="bg-primary text-white shadow-2 rounded-borders">
        <q-btn flat round dense icon="menu" class="q-mr-sm" />

        <q-separator dark vertical inset />

        <q-btn stretch flat label="Link" />

        <q-space />

        <q-btn stretch flat label="Link" />

        <q-separator dark vertical />

        <q-btn stretch flat label="Link" />

        <q-separator dark vertical />

        <q-btn stretch flat label="Link" />
      </q-toolbar>
    </div>
  </div>
</template>
```

### Custom colored

```vue
<template>
  <div class="q-pa-md">
    <q-list
      class="bg-grey-9 text-white shadow-2 rounded-borders"
      style="max-width: 250px; width: 100%"
    >
      <q-item>
        <q-item-section avatar>
          <q-avatar>
            <img
              alt="User avatar"
              src="https://cdn.quasar.dev/img/avatar6.jpg"
            />
          </q-avatar>
        </q-item-section>
        <q-item-section>Jane</q-item-section>
      </q-item>

      <q-separator color="orange" inset />

      <q-item>
        <q-item-section avatar>
          <q-avatar>
            <img
              alt="User avatar"
              src="https://cdn.quasar.dev/img/avatar3.jpg"
            />
          </q-avatar>
        </q-item-section>
        <q-item-section>Lily</q-item-section>
      </q-item>

      <q-item>
        <q-item-section avatar>
          <q-avatar>
            <img
              alt="User avatar"
              src="https://cdn.quasar.dev/img/avatar5.jpg"
            />
          </q-avatar>
        </q-item-section>
        <q-item-section>Mary</q-item-section>
      </q-item>
    </q-list>
  </div>
</template>
```

## Color CSS classes

Should you need, there are four special Quasar CSS classes which apply the color of QSeparator: `text-separator`, `bg-separator`, `text-dark-separator`, `bg-dark-separator`.

## Accessibility *(v2.25+)*

QSeparator renders a native `<hr>` with `aria-orientation` matching the `vertical` prop — there is nothing for you to add.