Divider

Storybook GitHub

<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 beyond its container by the default card padding, touching the edges of surrounding containers such as Card.

<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

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`variant`	`"solid" \| "dashed"`	`"solid"`
`color`	`string`	`"color-border-secondary-default"`
`decorative`	`false \| true`	`false`
`full-bleed`	`false \| true`	`false`

Slots

Slot	Bindings
`default`	`any`

Best practices

Use it when sections need a stronger visual boundary than whitespace provides.
Keep slot content short, for example "or" in login flows or a small badge.
Use Text with the secondary color for textual divider content.

Don't

Do not use dividers between every element, generous spacing often structures content better.
Do not use it as a decorative line unrelated to content structure.
Do not place more than a single small action inside the divider content.

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 beyond its container by the default card padding (--scale-size-24) in its line direction: horizontally when horizontal, vertically when vertical.

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.

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

Edit this pageorReport an issue

Datepicker

A calendar-style input for choosing a date, time, or date range.

Email Field

A form input for entering and validating a single email address.