Skip to content

2.1

Banner

The banner displays a message that alerts the user to know something or to take some actions.

Banner

Used to display a prominent message and related optional actions.

Import

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

Playground

API

MpBanner

Props
Slots
NameTypeDefault
id
Id of banner.
string -
variant
Variant of banner.
info | success | danger | warninginfo
is-inline
If true, will render banner in inline.
booleanfalse

MpBannerTitle

Props
Slots
NameTypeDefault
id
Id of banner title.
string -

MpBannerDescription

Props
Slots
NameTypeDefault
id
Id of banner description.
string -

MpBannerIcon

Props
NameTypeDefault
id
Id of banner icon.
string -
Props
Slots
NameTypeDefault
id
Id of banner link.
string -

MpBannerCloseButton

Props
Events
NameTypeDefault
id
Id of banner close button.
string -

Usage

Variant

With icon

Without icon

Description only

With close button

With inline