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 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.


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