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
