This article assumes you’ve already got a Laravel Jetstream application setup and that you are using the Livewire stack. If you haven’t, read the official documentation on how to get started.

The <x-jet-banner> component

Jetstream comes jam-packed with lots of goodies. One of those goodies is an <x-jet-banner> component. If you’re using the default layouts.app layout that comes with Jetstream, you might have already seen this. It can be found at the very start of the <body> tag:

<body class="font-sans antialiased">
    <x-jet-banner />

If you’re using a different layout file, go ahead and include this Blade component somewhere in your markup.

A brief look at the component itself shows that it’s powered by Alpine and support 2 different styles out of the box. A  success style, as well as an  error/danger style.

This is perfect for 99% of applications since you either want to say something is good or bad.

You might also notice that there is an @props declaration at the top of the component file:

@props(['style' => session('flash.bannerStyle', 'success'), 'message' => session('flash.banner')])

This is where the component gets all of the information for what type of banner should be shown as well as the message.

#laravel

 Flashing Banner Messages in Your Laravel Jetstream and Livewire Applications
9.90 GEEK