Banner

Used to display a prominent message and related optional actions.

Import

import {
  MpBanner,
  MpBannerTitle,
  MpBannerDescription,
  MpBannerIcon,
  MpBannerLink,
  MpBannerCloseButton
} from '@mekari/pixel3'

Playground

Notification

Something went wrong while processing your order. Please try again later.

Fix it Learn more

<script setup lang="ts">
  import {
    MpBanner,
    MpBannerTitle,
    MpBannerDescription,
    MpBannerIcon,
    MpBannerLink,
    MpBannerCloseButton,
    MpText
  } from '@mekari/pixel3'
  import { usePixelTheme } from '@mekari/pixel3-utils'
  const { isNextTheme } = usePixelTheme()
</script>

<template>
  <MpBanner id="banner-wtm">
    <MpBannerIcon id="banner-icon-wtm" />
    <MpBannerTitle id="banner-title-wtm">Notification</MpBannerTitle>
    <MpBannerDescription id="banner-description-wtm">
      Something went wrong while processing your order. Please try again later.
    </MpBannerDescription>
    <MpBannerLink id="banner-link-wtm">
      <!-- Conditional color is intended for docs purposes only. In your actual code, use the appropriate color token directly.  -->
      <MpText
        as="a"
        href="https://mekari.com"
        target="_blank"
        :color="isNextTheme ? 'text.link' : 'blue.400'"
        is-text-link
      >
        Fix it
      </MpText>
      <!-- Conditional color is intended for docs purposes only. In your actual code, use the appropriate color token directly.  -->
      <MpText
        as="a"
        href="https://mekari.com"
        target="_blank"
        :color="isNextTheme ? 'text.link' : 'blue.400'"
        is-text-link
      >
        Learn more
      </MpText>
    </MpBannerLink>
    <MpBannerCloseButton id="banner-close-button-wtm" />
  </MpBanner>
</template>

API

MpBanner

Props

Slots

Name	Type	Default
id Id of banner.	string	-
variant Variant of banner.	info | success | danger | warning	info
is-inline If true, will render banner in inline.	boolean	false

MpBannerTitle

Props

Slots

Name	Type	Default
id Id of banner title.	string	-

MpBannerDescription

Props

Slots

Name	Type	Default
id Id of banner description.	string	-

MpBannerIcon

Props

Name	Type	Default
id Id of banner icon.	string	-

MpBannerLink

Props

Slots

Name	Type	Default
id Id of banner link.	string	-

MpBannerCloseButton

Props

Events

Name	Type	Default
id Id of banner close button.	string	-

Usage

Variant

Notification

Congrats! You're up to date.

Change password

Your password has been changed successfully.

Server error

A server error occurred.

No internet connection

You appear to be offline, your progress may not be saved.

<script setup lang="ts">
  import { MpBanner, MpBannerTitle, MpBannerDescription, MpBannerIcon } from '@mekari/pixel3'
</script>

<template>
  <div>
    <MpBanner id="banner-wtm" variant="info">
      <MpBannerIcon id="banner-icon-wtm" />
      <MpBannerTitle id="banner-title-wtm">Notification</MpBannerTitle>
      <MpBannerDescription id="banner-description-wtm"
        >Congrats! You're up to date.</MpBannerDescription
      >
    </MpBanner>
  </div>
  <div style="margin-top: 16px">
    <MpBanner id="banner-0tn" variant="success">
      <MpBannerIcon id="banner-icon-0tn" />
      <MpBannerTitle id="banner-title-0tn">Change password</MpBannerTitle>
      <MpBannerDescription id="banner-description-0tn"
        >Your password has been changed successfully.</MpBannerDescription
      >
    </MpBanner>
  </div>
  <div style="margin-top: 16px">
    <MpBanner id="banner-w3s" variant="danger">
      <MpBannerIcon id="banner-icon-w3s" />
      <MpBannerTitle id="banner-title-w3s">Server error</MpBannerTitle>
      <MpBannerDescription id="banner-description-w3s">
        A server error occurred.</MpBannerDescription
      >
    </MpBanner>
  </div>
  <div style="margin-top: 16px">
    <MpBanner id="banner-ri9" variant="warning">
      <MpBannerIcon id="banner-icon-ri9" />
      <MpBannerTitle id="banner-title-ri9">No internet connection</MpBannerTitle>
      <MpBannerDescription id="banner-description-ri9">
        You appear to be offline, your progress may not be saved.
      </MpBannerDescription>
    </MpBanner>
  </div>
</template>

With icon

Notification

Congrats! You're up to date.

<script setup lang="ts">
  import { MpBanner, MpBannerTitle, MpBannerDescription, MpBannerIcon } from '@mekari/pixel3'
</script>

<template>
  <MpBanner id="banner-wtm" variant="info">
    <MpBannerIcon id="banner-icon-wtm" />
    <MpBannerTitle id="banner-title-wtm">Notification</MpBannerTitle>
    <MpBannerDescription id="banner-description-wtm"
      >Congrats! You're up to date.</MpBannerDescription
    >
  </MpBanner>
</template>

Without icon

Notification

Congrats! You're up to date.

<script setup lang="ts">
  import { MpBanner, MpBannerTitle, MpBannerDescription } from '@mekari/pixel3'
</script>

<template>
  <MpBanner id="banner-wtm" variant="info">
    <MpBannerTitle id="banner-title-wtm">Notification</MpBannerTitle>
    <MpBannerDescription id="banner-description-wtm"
      >Congrats! You're up to date.</MpBannerDescription
    >
  </MpBanner>
</template>

Description only

Congrats! You're up to date.

<script setup lang="ts">
  import { MpBanner, MpBannerDescription } from '@mekari/pixel3'
</script>

<template>
  <MpBanner id="banner-wtm" variant="info">
    <MpBannerDescription id="banner-description-wtm"
      >Congrats! You're up to date.</MpBannerDescription
    >
  </MpBanner>
</template>

With close button

Notification

Congrats! You're up to date.

<script setup lang="ts">
  import {
    MpBanner,
    MpBannerTitle,
    MpBannerDescription,
    MpBannerIcon,
    MpBannerCloseButton
  } from '@mekari/pixel3'
</script>

<template>
  <MpBanner id="banner-wtm" variant="info">
    <MpBannerIcon id="banner-icon-wtm" />
    <MpBannerTitle id="banner-title-wtm">Notification</MpBannerTitle>
    <MpBannerDescription id="banner-description-wtm"
      >Congrats! You're up to date.</MpBannerDescription
    >
    <MpBannerCloseButton id="banner-close-button-wtm" />
  </MpBanner>
</template>

With link

Notification

Congrats! You're up to date.

Fix it Learn more

<script setup lang="ts">
  import {
    MpBanner,
    MpBannerTitle,
    MpBannerDescription,
    MpBannerIcon,
    MpBannerLink,
    MpText
  } from '@mekari/pixel3'
  import { usePixelTheme } from '@mekari/pixel3-utils'
  const { isNextTheme } = usePixelTheme()
</script>

<template>
  <MpBanner id="banner-wtm" variant="info">
    <MpBannerIcon id="banner-icon-wtm" />
    <MpBannerTitle id="banner-title-wtm">Notification</MpBannerTitle>
    <MpBannerDescription id="banner-description-wtm"
      >Congrats! You're up to date.</MpBannerDescription
    >
    <MpBannerLink id="banner-link-wtm">
      <!-- Conditional color is intended for docs purposes only. In your actual code, use the appropriate color token directly.  -->
      <MpText
        as="a"
        href="https://mekari.com"
        target="_blank"
        :color="isNextTheme ? 'text.link' : 'blue.400'"
        is-text-link
      >
        Fix it
      </MpText>
      <!-- Conditional color is intended for docs purposes only. In your actual code, use the appropriate color token directly.  -->
      <MpText
        as="a"
        href="https://mekari.com"
        target="_blank"
        :color="isNextTheme ? 'text.link' : 'blue.400'"
        is-text-link
      >
        Learn more
      </MpText>
    </MpBannerLink>
  </MpBanner>
</template>

With inline

The report is in progress. Download the report by email.

The report is in progress. Download the report by email.

The report is in progress. Download the report by email.

Learn more

<script setup lang="ts">
  import {
    MpBanner,
    MpBannerDescription,
    MpBannerIcon,
    MpBannerCloseButton,
    MpBannerLink,
    MpText
  } from '@mekari/pixel3'
  import { usePixelTheme } from '@mekari/pixel3-utils'
  const { isNextTheme } = usePixelTheme()
</script>

<template>
  <div>
    <MpBanner id="banner-wtm" variant="info" is-inline>
      <MpBannerIcon id="banner-icon-wtm" />
      <MpBannerDescription id="banner-description-wtm">
        The report is in progress. Download the report by email.
      </MpBannerDescription>
    </MpBanner>
  </div>
  <div style="margin-top: 16px">
    <MpBanner id="banner-0tn" variant="info" is-inline>
      <MpBannerIcon id="banner-icon-0tn" />
      <MpBannerDescription id="banner-description-0tn">
        The report is in progress. Download the report by email.
      </MpBannerDescription>
      <MpBannerCloseButton id="banner-close-button-0tn" />
    </MpBanner>
  </div>
  <div style="margin-top: 16px">
    <MpBanner id="banner-w3s" variant="info" is-inline>
      <MpBannerIcon id="banner-icon-w3s" />
      <MpBannerDescription id="banner-description-w3s">
        The report is in progress. Download the report by email.
      </MpBannerDescription>
      <MpBannerLink id="banner-link-w3s">
        <!-- Conditional color is intended for docs purposes only. In your actual code, use the appropriate color token directly.  -->
        <MpText
          as="a"
          href="https://mekari.com"
          target="_blank"
          :color="isNextTheme ? 'text.link' : 'blue.400'"
          is-text-link
        >
          Learn more
        </MpText>
      </MpBannerLink>
    </MpBanner>
  </div>
</template>