Banner

A banner displays a prominent message and related optional actions.

A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.

Banners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.

Basic link 

<x-mbc::banner open>
    There was a problem processing a transaction on your credit card.

    @slot('actions')
        <x-mbc::button label="Fix it" variant="text" />
        <x-mbc::button label="Learn more" variant="text" />
    @endslot
</x-mbc::banner>

Fixed Banner link

info

For the example below, the banner is fixed at the top of the screen using <iframe /> element to contain the banner. 

<x-mbc::banner open fixed>
    There was a problem processing a transaction on your credit card.

    @slot('actions')
        <x-mbc::button label="Fix it" variant="text" />
        <x-mbc::button label="Learn more" variant="text" />
    @endslot
</x-mbc::banner>
<x-mbc::banner open fixed>
    // banner content
</x-mbc::banner>

Icon link 

<x-mbc::banner open icon="error_outline">
    There was a problem processing a transaction on your credit card.

    @slot('actions')
        <x-mbc::button label="Fix it" variant="text" />
    @endslot
</x-mbc::banner>
<x-mbc::banner open icon="error_outline">
    // Banner content
</x-mbc::banner>

Properties link

mbc::banner link

Name Type Default Description
action string The action to be performed when the banner is clicked.
children any Required. The content of the banner.
fixed bool false Fix the banner at the top of the screen.
icon string The banner icon.
open bool false Whether the banner is open.
slot:actions any The actions to be displayed in the banner.
text string The banner text.

References link

Edit this page