Separator

A dividing line between two groups of content, announced as one.

Separator is the line you draw between two groups of content, rendered as a role="separator" so a screen reader announces the division too. Useful between the sections of a settings page, or between the actions in a toolbar, where a bare border would show the division to sighted readers only.

A separator takes no space of its own, so give it a size on the axis it divides.

A vertical one needs a height as well, which in a flex row is usually self-stretch.

App.vue

<template>
  <div class="flex w-full max-w-md flex-col gap-6">
    <div class="flex items-center gap-2" role="group" aria-label="Document">
      <Button v-for="action in actions" :key="action" :class="button">
        {{ action }}
      </Button>

      <Separator orientation="vertical" :class="vertical" />

      <Button :class="button">Delete</Button>
    </div>

    <div class="flex flex-col gap-4">
      <p class="type-surface-body-sm text-surface-muted">
        A separator takes no space of its own, so give it a size on the axis it
        divides.
      </p>

      <Separator :class="horizontal" />

      <p class="type-surface-body-sm text-surface-muted">
        A vertical one needs a height as well, which in a flex row is usually
        <code>self-stretch</code>.
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Button } from '@maas/mirror/vue/Button'
import { Separator } from '@maas/mirror/vue/Separator'

const actions = ['Edit', 'Duplicate', 'Share']

const button = [
  'rounded-component-md border-surface border px-2.5 py-1',
  'type-component-xs text-surface-muted hover:text-surface',
  'transition-all duration-100 ease-linear',
  'outline-4 outline-transparent focus-visible:focus-ring',
].join(' ')

const vertical = 'bg-surface-higher w-px self-stretch'

const horizontal = 'bg-surface-higher h-px w-full'
</script>

Show code

Usage guidelines

Separator ships no CSS at all, so it is invisible until you give it a size and a color. A one-pixel background on the axis it divides is the usual recipe.should
A vertical separator has no height in a flex row until it gets one, either from align-self: stretch or from an explicit size.should
Use it where the division carries meaning. A line that is only decoration is better off as a border on the element next to it, since that keeps it out of the accessibility tree.should