Banner

Source

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

<template>
  <mt-banner title="This is a banner" variant="neutral">
    I am in the default slot of the banner
  </mt-banner>
</template>

Usage

Banner is a persistent, inline message that stays in the page layout. Use it for warnings, success confirmations, inherited-state hints, or inline guidance that should remain visible near the affected content until the user reads or dismisses it, rather than as a temporary overlay notification.

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

Examples

Closable

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

<template>
  <mt-banner title="Closable banner" variant="neutral" :closable="true">
    Use this when dismissing the message is a safe choice for the user.
  </mt-banner>
</template>

Variants

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

<template>
  <mt-banner variant="neutral" title="Neutral banner">
    Use for general information that should stay visible in the page flow.
  </mt-banner>

  <mt-banner variant="info" title="Info banner">
    Use for informative updates or guidance that helps users continue their task.
  </mt-banner>

  <mt-banner variant="attention" title="Attention banner">
    Use when users should review something carefully before continuing.
  </mt-banner>

  <mt-banner variant="critical" title="Critical banner">
    Use for errors or states that require user attention.
  </mt-banner>

  <mt-banner variant="positive" title="Positive banner">
    Use for success states that should remain visible in context.
  </mt-banner>

  <mt-banner variant="inherited" title="Inherited banner">
    Use when content or configuration is inherited from another source.
  </mt-banner>
</template>

API reference

Props

Prop	Type	Default
`variant`	`"critical" \| "positive" \| "info" \| "neutral" \| "attention" \| "inherited"`	`"neutral"`
`title`	`string`
`hide-icon`	`boolean`	`false`
`closable`	`boolean`	`false`
`banner-index`	`string`
`icon`	`string`

Events

Event	Payload
`close`	`[bannerIndex?: string \| undefined]`

Slots

Slot	Bindings
`customIcon`	`{}`
`default`	`{}`

Best practices

Keep the message concise and directly tied to the surrounding context.
Choose the variant that matches the meaning of the message.
Prefer Banner with the default icon enabled, using the icon that comes with the selected variant.
Use the title to help people scan the message quickly when the content is more than a short sentence.
Use closable only when dismissing the banner is a safe choice for the user.
If you add actions inside the banner content, choose components and variants with sufficient color contrast. Button in primary or secondary is a good starting point.

Don't

Do not use Banner for transient confirmations that can disappear after a few seconds.
Do not stack many Banner components together, because they quickly compete with the main page content.
Do not hide blocking or decision-heavy flows in Banner when a modal or dedicated screen is more appropriate.
Do not replace the built-in variant icon unless you have a strong semantic reason to do so.
Do not rely on icon color alone to communicate meaning. The text should still be clear on its own.

Accessibility

Banner content should remain understandable without depending on the icon alone.
Use clear text so the message still works for people using screen readers or high-contrast modes.
Only make a banner dismissible when removing it will not hide information the user still needs.
If the banner includes actions in the slot content, verify their contrast against the banner background instead of assuming every button style will remain readable.
Keep the message brief and structured so it can be scanned quickly inside a busy page.

Snackbar: when you need lightweight temporary feedback that appears separately from the page content.

Edit this pageorReport an issue

Badge

A compact, non-interactive status label for short, glanceable states.

Button

The standard action trigger for Meteor interfaces.