Divider

<script setup lang="ts">
import MtDivider from "@shopware-ag/meteor-component-library/MtDivider";
</script>

<template>
  <mt-divider />
</template>

Usage

Divider separates related content into visual sections. Use it to structure lists, toolbars, or form areas where spacing alone does not create enough distinction. The divider stretches to the full width of its container, or to the full height when vertical.

import { MtDivider } from "@shopware-ag/meteor-component-library";

Examples

With content

Slot content renders centered between two divider lines, with a fixed gap on both sides.

<script setup lang="ts">
import MtDivider from "@shopware-ag/meteor-component-library/MtDivider";
import MtText from "@shopware-ag/meteor-component-library/MtText";
</script>

<template>
  <mt-divider>
    <mt-text size="xs" color="color-text-secondary-default"
      >or continue with</mt-text
    >
  </mt-divider>
</template>

With an action

A single small action can sit in the middle of the divider, for example to load older entries.

<script setup lang="ts">
import MtDivider from "@shopware-ag/meteor-component-library/MtDivider";
import MtButton from "@shopware-ag/meteor-component-library/MtButton";
</script>

<template>
  <mt-divider>
    <mt-button variant="secondary" size="small">Show older entries</mt-button>
  </mt-divider>
</template>

Vertical

A vertical divider stretches to the height of its container, for example between items in a toolbar.

<script setup lang="ts">
import MtDivider from "@shopware-ag/meteor-component-library/MtDivider";
</script>

<template>
  <div
    style="
      display: flex;
      height: 48px;
      gap: var(--scale-size-16);
      align-items: center;
    "
  >
    <span>Products</span>
    <mt-divider orientation="vertical" />
    <span>Orders</span>
    <mt-divider orientation="vertical" />
    <span>Customers</span>
  </div>
</template>

Full bleed

By default the divider stays inset within the container padding. With full-bleed it stretches across the padding of surrounding containers such as Card, touching the container edges. This works like the Inset utility: the container provides --mt-inset-* custom properties matching its padding, and the divider compensates with negative margins.

<script setup lang="ts">
import MtCard from "@shopware-ag/meteor-component-library/MtCard";
import MtDivider from "@shopware-ag/meteor-component-library/MtDivider";
import MtText from "@shopware-ag/meteor-component-library/MtText";
</script>

<template>
  <mt-card title="Full bleed">
    <div style="display: grid; gap: var(--scale-size-24)">
      <mt-text>The divider below stretches across the card padding.</mt-text>
      <mt-divider full-bleed />
      <mt-text>The divider above ignores the card padding.</mt-text>
    </div>
  </mt-card>
</template>

Variants and color

The line style can be solid or dashed, and the color accepts any border color token name.

<script setup lang="ts">
import MtDivider from "@shopware-ag/meteor-component-library/MtDivider";
</script>

<template>
  <div style="display: grid; gap: var(--scale-size-16)">
    <mt-divider />
    <mt-divider variant="dashed" />
    <mt-divider color="color-border-brand-default" />
    <mt-divider variant="dashed" color="color-border-brand-default" />
  </div>
</template>

API reference

Props

Slots

Best practices

Behavior

• The divider fills its container: full width when horizontal, full height when vertical. A vertical divider therefore needs a parent with a defined height, such as a flex row.
• Without slot content a single continuous line renders. With slot content the line splits into a start and end segment with the content centered between them.
• color accepts a design token name such as color-border-brand-default and defaults to the secondary border color.
• With full-bleed the divider extends across the container padding in its line direction: horizontally through the inline padding, vertically through the block padding. The container must provide the --mt-inset-* custom properties, as Card does.

Accessibility

• The divider renders with role="separator" and the matching aria-orientation when it separates content in a meaningful way.
• Set decorative for purely visual dividers without semantic meaning, this removes the separator semantics so assistive technologies skip the element.
• With slot content the separator role is dropped, because a separator hides its children from assistive technologies. The content is announced on its own, so keep it meaningful and avoid decorative filler text.

Related components

• Card: when sections deserve their own contained surface instead of a simple separation.