Skip to content

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