import { MtBanner } from '@/components/feedback-indicator/mt-banner/mt-banner.vue';
The visual style variant that determines the banner’s appearance and semantic meaning.Options: neutral, info, attention, critical, positive, inherited
Optional title text displayed at the top of the banner message.
When true, hides the default variant icon from the banner.
When true, displays a close button allowing users to dismiss the banner.
Optional identifier passed to the close event for tracking which banner was closed.
Custom icon name to override the default variant icon.
Emitted when the close button is clicked. Receives the bannerIndex as parameter.Signature: (bannerIndex?: string) => void
The main content area for the banner message.
Override the default icon with custom content.
Usage Examples
Basic Banner
<template>
<mt-banner variant="info">
This is an informational message.
</mt-banner>
<mt-banner variant="positive">
Operation completed successfully!
</mt-banner>
<mt-banner variant="attention">
Please review your settings.
</mt-banner>
<mt-banner variant="critical">
An error occurred. Please try again.
</mt-banner>
</template>
Banner with Title
<template>
<mt-banner variant="info" title="Important Update">
We've updated our terms of service. Please review the changes.
</mt-banner>
</template>
Closable Banner
<template>
<mt-banner
variant="attention"
:closable="true"
banner-index="warning-1"
@close="handleBannerClose"
>
This message can be dismissed.
</mt-banner>
</template>
<script setup>
const handleBannerClose = (bannerIndex) => {
console.log('Banner closed:', bannerIndex);
};
</script>
Banner without Icon
<template>
<mt-banner variant="neutral" :hide-icon="true">
Clean message without icon.
</mt-banner>
</template>
Banner with Custom Icon
<template>
<mt-banner variant="info" icon="solid-bell">
You have new notifications.
</mt-banner>
</template>
Banner with Rich Content
<template>
<mt-banner variant="positive" title="Success">
<p>Your changes have been saved.</p>
<ul>
<li>Profile updated</li>
<li>Settings synchronized</li>
<li>Notifications sent</li>
</ul>
</mt-banner>
</template>