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

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>

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>

Aligned content

With alignment="left" or alignment="right" the content moves to the corresponding edge and the divider line on that side is removed, for example for section labels, feed markers, or timestamps.

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

<template>
  <div style="display: grid; gap: var(--scale-size-24)">
    <mt-divider alignment="left">
      <mt-text size="xs" color="color-text-secondary-default"
        >Customer details</mt-text
      >
    </mt-divider>
    <mt-divider>
      <mt-text size="xs" color="color-text-secondary-default"
        >New messages</mt-text
      >
    </mt-divider>
    <mt-divider alignment="right">
      <mt-text size="xs" color="color-text-secondary-default"
        >Updated 5 minutes ago</mt-text
      >
    </mt-divider>
  </div>
</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: 32px;
      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>

API reference

Props

Prop	Type	Default
`orientation` The direction of the divider line.	`"horizontal" \| "vertical"`	`"horizontal"`
`alignment` Where slot content sits on the divider. With "left" or "right" the line on that side is removed and the content moves to the edge.	`"center" \| "left" \| "right"`	`"center"`
`variant` The line style of the divider.	`"solid" \| "dashed"`	`"solid"`
`color` Color token used for the divider line, for example "color-border-brand-default".	`string`	`"color-border-secondary-default"`
`full-bleed` Stretches the divider beyond its container by the default card padding, for example to span the full width of a card.	`false \| true`	`false`
`decorative` Marks the divider as purely visual so assistive technologies ignore it.	`false \| true`	`false`

Slots

Slot	Bindings
`default`	`any`

Best practices

Use the divider when sections need a stronger visual boundary than only whitespaces.
When displaying text, use the mt-text component with size s and secondary color token as the default.

Don't

Do not use dividers in cases where just whitespace can achieve the same result.
Do not place multiple elements inside of the divider content slot.
Do not use the divider as decorative line without the decorative attribute.

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 by default.
alignment moves slot content to the left or right edge; the line on that side is removed and a single segment fills the remaining space. Without slot content the prop has no effect.
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.