CINXE.COM

<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Livewire | Laravel Jetstream</title> <meta name="description" content="Beautifully designed application scaffolding for Laravel"> <link rel="preload stylesheet" href="/assets/style.e0bb331f.css" as="style"> <script type="module" src="/assets/app.25fbacc1.js"></script> <link rel="modulepreload" href="/assets/chunks/framework.cd7f01a3.js"> <link rel="modulepreload" href="/assets/chunks/LNLocalSearchBox.826abc10.js"> <link rel="modulepreload" href="/assets/stacks_livewire.md.8ba5c068.lean.js"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" sizes="16x16" type="image/png" href="/favicon-16x16.png"> <link rel="icon" sizes="32x32" type="image/png" href="/favicon-32x32.png"> <link rel="mask-icon" href="/safari-pinned-tab.svg"> <meta name="msapplication-TileColor" content="#18b69b"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta property="og:image" content="/social-share.png"> <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:image" content="/social-share.png"> <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script> </head> <body> <div id="app"><header class="bg-white/80 dark:bg-gray-900/80 backdrop-blur border-b dark:border-gray-700 sticky top-0 z-50 w-full h-[3.3rem] flex-none"><div class="max-w-[90rem] px-4 sm:px-6 md:px-8 mx-auto h-[3.3rem]"><div class="flex items-center h-[3.3rem] gap-4"><button type="button" class="md:hidden text-gray-600 dark:text-gray-400"><span class="sr-only">Navigation</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="flex-shrink-0 w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button><div style="position:fixed;top:1;left:1;width:1;height:0;padding:0;margin:-1;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none;"></div><a href="/" class="flex-shrink-0 h-[24px] text-gray-500 dark:text-white" alt="Laravel Jetstream"><img class="flex-shrink-0 h-[24px] text-gray-500 dark:text-white block dark:hidden" alt="logo" src="/logo.svg"><img class="flex-shrink-0 h-[24px] text-gray-500 dark:text-white hidden dark:block" alt="logo" src="/logo-dark.svg"></a><div data-headlessui-state class="relative inline-block text-left"><div><button id="headlessui-menu-button-98" type="button" aria-haspopup="menu" aria-expanded="false" data-headlessui-state class="inline-flex w-full items-center justify-center gap-x-1.5 rounded-full bg-gray-100 dark:bg-gray-950 px-3 py-1 text-[13px] font-semibold text-gray-500 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-950/70">v5.x <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="text-gray-500 w-4 h-4 ml-2 -mr-1"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></button></div></div><div class="ml-auto md:flex items-center md:divide-x md:divide-gray-200 md:dark:divide-gray-700"><div class="hidden md:flex items-center gap-12 px-6"><a href="https://github.com/laravel/jetstream" class="text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-primary-500">GitHub</a></div><div class="hidden md:flex md:items-center gap-6 pl-6"><div data-headlessui-state class="relative inline-block text-left"><div><button id="headlessui-menu-button-100" type="button" aria-haspopup="menu" aria-expanded="false" data-headlessui-state class="flex items-center text-gray-500 dark:text-gray-400"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-5 h-5 text-gray-500"><path d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"></path></svg></button></div></div></div><div class="flex items-center gap-3 pl-6"><button type="button" class="md:hidden flex-shrink-0 text-gray-600 dark:text-gray-400"><span class="sr-only">Search</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path></svg></button><button type="button" class="md:hidden flex-shrink-0 text-gray-600 dark:text-gray-400"><span class="sr-only">More</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"></path></svg></button><div style="position:fixed;top:1;left:1;width:1;height:0;padding:0;margin:-1;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none;"></div></div></div></div></div></header><div class="relative"><div class="relative z-10 max-w-[90rem] mx-auto px-4 sm:px-6 md:px-8"><div class="hidden lg:block fixed z-20 inset-0 w-[19.5rem] top-[3.3rem] left-[max(0px,calc(50%-45rem))] right-auto px-8 pb-10 overflow-y-auto"><div class="sticky top-0 -ml-0.5"><div class="h-10 bg-gray-50 dark:bg-gray-900"></div><div id="local-search"><div class="bg-white dark:bg-gray-900 relative pointer-events-auto"><button class="hidden w-full lg:flex items-center text-sm leading-6 text-gray-400 rounded-md ring-1 ring-gray-900/10 shadow-sm py-1.5 pl-2 pr-3 hover:ring-gray-300 dark:hover:ring-gray-800/10 dark:bg-gray-800 dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:hover:bg-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-3 text-gray-400 flex-none"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path></svg><span>Search Jetstream Docs...</span><kbd class="ml-auto pl-3 flex-none font-sans text-xs font-semibold">⌘K</kbd></button></div></div><div class="h-8 bg-gradient-to-b from-gray-50 dark:from-gray-900"></div></div><div class="sidebar"><nav class="flex flex-col gap-6"><div><span class="text-gray-700 dark:text-gray-400 font-bold text-sm">Getting Started</span><div class="mt-2"><a href="/introduction.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Introduction</a><a href="/installation.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Installation</a><a href="/concept-overview.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Concept Overview</a><a href="/building-your-app.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Building Your App</a></div></div><div><span class="text-gray-700 dark:text-gray-400 font-bold text-sm">Features</span><div class="mt-2"><a href="/features/api.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">API</a><a href="/features/authentication.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Authentication</a><a href="/features/registration.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Registration</a><a href="/features/profile-management.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Profile Management</a><a href="/features/password-update.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Password Update</a><a href="/features/password-confirmation.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Password Confirmation</a><a href="/features/two-factor-authentication.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Two Factor Authentication</a><a href="/features/browser-sessions.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Browser Sessions</a><a href="/features/teams.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Teams</a></div></div><div><span class="text-gray-700 dark:text-gray-400 font-bold text-sm">Stack Features</span><div class="mt-2"><a href="/stacks/livewire.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700 !text-primary-500 !border-primary-500">Livewire</a><a href="/stacks/inertia.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Inertia</a></div></div></nav></div></div><div class="lg:pl-[19.5rem]"><div class="antialiased max-w-3xl mx-auto pt-10 xl:max-w-none xl:ml-0 xl:mr-[15.5rem] xl:pr-16 pb-24"><div><div class="PilgrimDoc max-w-none content prose dark:prose-invert prose-headings:font-normal prose-h1:text-3xl prose-h2:mb-3 prose-ul:list-none prose-ul:px-0 prose-li:pl-6 prose-img:rounded-lg prose-img:shadow prose-pre:bg-inherit prose-pre:p-6 prose-a:font-bold prose-a:no-underline prose-a:border-b hover:prose-a:border-b-2 prose-a:border-primary-500/50"><div style="position:relative;"><div><h1 id="livewire" tabindex="-1">Livewire <a class="header-anchor" href="#livewire" aria-label="Permalink to "Livewire""></a></h1><nav class="table-of-contents"><ul><li><a href="#introduction">Introduction</a></li><li><a href="#components">Components</a></li><li><a href="#modals">Modals</a></li><li><a href="#banner-alerts">Banner Alerts</a><ul><li><a href="#usage">Usage</a></li></ul></li></ul></nav><h2 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="#introduction" aria-label="Permalink to "Introduction""></a></h2><p>Laravel Livewire is a library that makes it simple to build modern, reactive, dynamic interfaces using Laravel Blade as your templating language. This is a great stack to choose if you want to build an application that is dynamic and reactive, and is a great alternative to a full JavaScript framework like Vue.js.</p><p>When using Livewire, your application's routes will respond with typical Blade templates. However, within these templates you may render Livewire components as necessary:</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki css-variables"><code><span class="line"><span style="color:var(--shiki-color-text);"><</span><span style="color:var(--shiki-token-string-expression);">div</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">class</span><span style="color:var(--shiki-token-keyword);">=</span><span style="color:var(--shiki-token-string-expression);">"mt-4"</span><span style="color:var(--shiki-color-text);">></span></span> <span class="line"><span style="color:var(--shiki-color-text);"> @livewire('server-list')</span></span> <span class="line"><span style="color:var(--shiki-color-text);"></</span><span style="color:var(--shiki-token-string-expression);">div</span><span style="color:var(--shiki-color-text);">></span></span></code></pre></div><p>When using the Livewire stack, Jetstream has some unique features that you should be aware of. We will discuss each of these features below.</p><div class="tip custom-block"><p class="custom-block-title">Livewire Documentation</p><p>Before using the Livewire stack, you are strongly encouraged to review the entire <a href="https://livewire.laravel.com" target="_blank" rel="noreferrer">Livewire documentation</a></p></div><h2 id="components" tabindex="-1">Components <a class="header-anchor" href="#components" aria-label="Permalink to "Components""></a></h2><p>When we created the Jetstream Livewire stack, a variety of Blade components (buttons, panels, inputs, modals) were created to assist in creating UI consistency and ease of use. You are free to use or not use these components. All of these components are located within your application's <code>resources/views/components</code> directory.</p><p>You may gain insight into how to use these components by reviewing their usage within Jetstream's existing views located within your application's <code>resources/views</code> directory.</p><h2 id="modals" tabindex="-1">Modals <a class="header-anchor" href="#modals" aria-label="Permalink to "Modals""></a></h2><p>Most of the Jetstream Livewire stack's components have no communication with your backend. However, the Livewire modal components included with Jetstream do interact with your Livewire backend to determine their open / closed state.</p><p>In addition, Jetstream includes two types of modals: <code>dialog-modal</code> and <code>confirmation-modal</code>. The <code>confirmation-modal</code> may be used when confirming destructive actions such as deletions, while the <code>dialog-modal</code> is a more generic modal window that may be used at any time.</p><p>To illustrate the use of modals, consider the following modal that confirms a user would like to delete their account:</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki css-variables"><code><span class="line"><span style="color:var(--shiki-color-text);"><</span><span style="color:var(--shiki-token-string-expression);">x-confirmation-modal</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">wire:model</span><span style="color:var(--shiki-token-keyword);">=</span><span style="color:var(--shiki-token-string-expression);">"confirmingUserDeletion"</span><span style="color:var(--shiki-color-text);">></span></span> <span class="line"><span style="color:var(--shiki-color-text);"> <</span><span style="color:var(--shiki-token-string-expression);">x-slot</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">name</span><span style="color:var(--shiki-token-keyword);">=</span><span style="color:var(--shiki-token-string-expression);">"title"</span><span style="color:var(--shiki-color-text);">></span></span> <span class="line"><span style="color:var(--shiki-color-text);"> Delete Account</span></span> <span class="line"><span style="color:var(--shiki-color-text);"> </</span><span style="color:var(--shiki-token-string-expression);">x-slot</span><span style="color:var(--shiki-color-text);">></span></span> <span class="line"></span> <span class="line"><span style="color:var(--shiki-color-text);"> <</span><span style="color:var(--shiki-token-string-expression);">x-slot</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">name</span><span style="color:var(--shiki-token-keyword);">=</span><span style="color:var(--shiki-token-string-expression);">"content"</span><span style="color:var(--shiki-color-text);">></span></span> <span class="line"><span style="color:var(--shiki-color-text);"> Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted.</span></span> <span class="line"><span style="color:var(--shiki-color-text);"> </</span><span style="color:var(--shiki-token-string-expression);">x-slot</span><span style="color:var(--shiki-color-text);">></span></span> <span class="line"></span> <span class="line"><span style="color:var(--shiki-color-text);"> <</span><span style="color:var(--shiki-token-string-expression);">x-slot</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">name</span><span style="color:var(--shiki-token-keyword);">=</span><span style="color:var(--shiki-token-string-expression);">"footer"</span><span style="color:var(--shiki-color-text);">></span></span> <span class="line"><span style="color:var(--shiki-color-text);"> <</span><span style="color:var(--shiki-token-string-expression);">x-secondary-button</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">wire:click</span><span style="color:var(--shiki-token-keyword);">=</span><span style="color:var(--shiki-token-string-expression);">"$toggle('confirmingUserDeletion')"</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">wire:loading.attr</span><span style="color:var(--shiki-token-keyword);">=</span><span style="color:var(--shiki-token-string-expression);">"disabled"</span><span style="color:var(--shiki-color-text);">></span></span> <span class="line"><span style="color:var(--shiki-color-text);"> Nevermind</span></span> <span class="line"><span style="color:var(--shiki-color-text);"> </</span><span style="color:var(--shiki-token-string-expression);">x-secondary-button</span><span style="color:var(--shiki-color-text);">></span></span> <span class="line"></span> <span class="line"><span style="color:var(--shiki-color-text);"> <</span><span style="color:var(--shiki-token-string-expression);">x-danger-button</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">class</span><span style="color:var(--shiki-token-keyword);">=</span><span style="color:var(--shiki-token-string-expression);">"ml-2"</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">wire:click</span><span style="color:var(--shiki-token-keyword);">=</span><span style="color:var(--shiki-token-string-expression);">"deleteUser"</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">wire:loading.attr</span><span style="color:var(--shiki-token-keyword);">=</span><span style="color:var(--shiki-token-string-expression);">"disabled"</span><span style="color:var(--shiki-color-text);">></span></span> <span class="line"><span style="color:var(--shiki-color-text);"> Delete Account</span></span> <span class="line"><span style="color:var(--shiki-color-text);"> </</span><span style="color:var(--shiki-token-string-expression);">x-danger-button</span><span style="color:var(--shiki-color-text);">></span></span> <span class="line"><span style="color:var(--shiki-color-text);"> </</span><span style="color:var(--shiki-token-string-expression);">x-slot</span><span style="color:var(--shiki-color-text);">></span></span> <span class="line"><span style="color:var(--shiki-color-text);"></</span><span style="color:var(--shiki-token-string-expression);">x-confirmation-modal</span><span style="color:var(--shiki-color-text);">></span></span></code></pre></div><p>As you can see, the modal's open / close state is determined by a <code>wire:model</code> property that is declared on the component. The property's name should correspond to a boolean property on your Livewire component's corresponding PHP class. Typically, you will set this property to <code>true</code> when the user clicks a UI element in your application that should open the modal. Of course, the property should be set to <code>false</code> when you are ready to close the modal.</p><p>The modal's contents may be specified by hydrating three Blade component slots: <code>title</code>, <code>content</code>, and <code>footer</code>.</p><h2 id="banner-alerts" tabindex="-1">Banner Alerts <a class="header-anchor" href="#banner-alerts" aria-label="Permalink to "Banner Alerts""></a></h2><p>Jetstream's Livewire stack includes an <code>InteractsWithBanner</code> trait that is designed to simplify the process of displaying banner messages to the user.</p><p>The <code>InteractsWithBanner</code> trait provides methods to quickly display a <code>success</code> or <code>danger</code> message with the help of the <code>resources/views/components/banner.blade.php</code> component and <a href="https://livewire.laravel.com/docs/events" target="_blank" rel="noreferrer">Livewire's event system</a>.</p><h3 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-label="Permalink to "Usage""></a></h3><p>First, include the <code>InteractsWithBanner</code> trait within one of your Livewire components:</p><div class="language-php"><button title="Copy Code" class="copy"></button><span class="lang">php</span><pre class="shiki css-variables"><code><span class="line"><span style="color:var(--shiki-token-keyword);">use</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-constant);">Laravel</span><span style="color:var(--shiki-token-punctuation);">\</span><span style="color:var(--shiki-token-constant);">Jetstream</span><span style="color:var(--shiki-token-punctuation);">\</span><span style="color:var(--shiki-token-constant);">InteractsWithBanner</span><span style="color:var(--shiki-color-text);">;</span></span> <span class="line"></span> <span class="line"><span style="color:var(--shiki-token-keyword);">class</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">ExampleComponent</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-keyword);">extends</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">Component</span></span> <span class="line"><span style="color:var(--shiki-color-text);">{</span></span> <span class="line"><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-keyword);">use</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-constant);">InteractsWithBanner</span><span style="color:var(--shiki-color-text);">;</span></span> <span class="line"><span style="color:var(--shiki-color-text);"> </span></span> <span class="line"><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-comment);">// ...</span></span> <span class="line"><span style="color:var(--shiki-color-text);">}</span></span></code></pre></div><p>To display a message to the user, invoke the <code>banner</code>, <code>warningBanner</code>, or <code>dangerBanner</code> methods within a Livewire component method:</p><div class="language-php"><button title="Copy Code" class="copy"></button><span class="lang">php</span><pre class="shiki css-variables"><code><span class="line"><span style="color:var(--shiki-token-constant);">$this</span><span style="color:var(--shiki-token-keyword);">-></span><span style="color:var(--shiki-token-function);">banner</span><span style="color:var(--shiki-token-punctuation);">(</span><span style="color:var(--shiki-token-string-expression);">'Invoice paid.'</span><span style="color:var(--shiki-token-punctuation);">)</span><span style="color:var(--shiki-color-text);">;</span></span> <span class="line"><span style="color:var(--shiki-token-constant);">$this</span><span style="color:var(--shiki-token-keyword);">-></span><span style="color:var(--shiki-token-function);">warningBanner</span><span style="color:var(--shiki-token-punctuation);">(</span><span style="color:var(--shiki-token-string-expression);">'Payment pending approval.'</span><span style="color:var(--shiki-token-punctuation);">)</span><span style="color:var(--shiki-color-text);">;</span></span> <span class="line"><span style="color:var(--shiki-token-constant);">$this</span><span style="color:var(--shiki-token-keyword);">-></span><span style="color:var(--shiki-token-function);">dangerBanner</span><span style="color:var(--shiki-token-punctuation);">(</span><span style="color:var(--shiki-token-string-expression);">'Payment failed.'</span><span style="color:var(--shiki-token-punctuation);">)</span><span style="color:var(--shiki-color-text);">;</span></span></code></pre></div></div></div></div><footer class="divide-y divide-gray-200 dark:divide-gray-700"><div class="gap-6 flex justify-between py-6"><a class="font-semibold group flex items-center text-base space-x-2" href="/features/teams.html"><span class="text-gray-500 group-hover:text-gray-600">←</span><span class="text-sm text-gray-500 group-hover:text-gray-700"> Teams</span><span class="text-gray-500 group-hover:text-gray-600"></span></a><a class="font-semibold group flex items-center text-base space-x-2 ml-auto" href="/stacks/inertia.html"><span class="text-gray-500 group-hover:text-gray-600"></span><span class="text-sm text-gray-500 group-hover:text-gray-700"> Inertia</span><span class="text-gray-500 group-hover:text-gray-600">→</span></a></div></footer><div class="fixed z-20 top-[3.3rem] bottom-0 right-[max(0px,calc(50%-45rem))] w-[19.5rem] py-10 overflow-y-auto hidden xl:block"><div class="px-8"><h2 class="aside-header font-bold text-sm text-gray-600 dark:text-gray-400"> On this page </h2><div><div class="aside"><nav class="mt-4"><ul></ul></nav></div></div></div></div></div></div></div></div></div></div> <script>window.__VP_HASH_MAP__=JSON.parse("{\"concept-overview.md\":\"9071f841\",\"features_teams.md\":\"1fb70728\",\"features_two-factor-authentication.md\":\"780b4998\",\"index.md\":\"ea4aa43c\",\"features_registration.md\":\"b9f8f560\",\"features_profile-management.md\":\"1282ba69\",\"introduction.md\":\"4a203c75\",\"stacks_index.md\":\"e9741a5b\",\"installation.md\":\"3e7d6f51\",\"building-your-app.md\":\"301eafa7\",\"features_api.md\":\"fc165500\",\"features_browser-sessions.md\":\"e60acd88\",\"features_password-update.md\":\"364100b0\",\"features_authentication.md\":\"404050a2\",\"features_password-confirmation.md\":\"249125b1\",\"stacks_inertia.md\":\"fa06f7e3\",\"features_index.md\":\"afce1f65\",\"stacks_livewire.md\":\"8ba5c068\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Laravel Jetstream\",\"description\":\"Beautifully designed application scaffolding for Laravel\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":{\"light\":\"/logo.svg\",\"dark\":\"/logo-dark.svg\"},\"nav\":[{\"text\":\"GitHub\",\"link\":\"https://github.com/laravel/jetstream\"}],\"versions\":[{\"text\":\"v5.x\",\"link\":\"https://jetstream.laravel.com\",\"current\":true},{\"text\":\"v4.x\",\"link\":\"https://github.com/laravel/jetstream-docs/tree/4.x\"},{\"text\":\"v3.x\",\"link\":\"https://github.com/laravel/jetstream-docs/tree/3.x\"},{\"text\":\"v2.x\",\"link\":\"https://github.com/laravel/jetstream-docs/tree/2.x\"},{\"text\":\"v1.x\",\"link\":\"https://github.com/laravel/jetstream-docs/tree/1.x\"}],\"sidebar\":[{\"text\":\"Getting Started\",\"items\":[{\"text\":\"Introduction\",\"link\":\"/introduction.html\"},{\"text\":\"Installation\",\"link\":\"/installation.html\"},{\"text\":\"Concept Overview\",\"link\":\"/concept-overview.html\"},{\"text\":\"Building Your App\",\"link\":\"/building-your-app.html\"}]},{\"text\":\"Features\",\"items\":[{\"text\":\"API\",\"link\":\"/features/api.html\"},{\"text\":\"Authentication\",\"link\":\"/features/authentication.html\"},{\"text\":\"Registration\",\"link\":\"/features/registration.html\"},{\"text\":\"Profile Management\",\"link\":\"/features/profile-management.html\"},{\"text\":\"Password Update\",\"link\":\"/features/password-update.html\"},{\"text\":\"Password Confirmation\",\"link\":\"/features/password-confirmation.html\"},{\"text\":\"Two Factor Authentication\",\"link\":\"/features/two-factor-authentication.html\"},{\"text\":\"Browser Sessions\",\"link\":\"/features/browser-sessions.html\"},{\"text\":\"Teams\",\"link\":\"/features/teams.html\"}]},{\"text\":\"Stack Features\",\"items\":[{\"text\":\"Livewire\",\"link\":\"/stacks/livewire.html\"},{\"text\":\"Inertia\",\"link\":\"/stacks/inertia.html\"}]}],\"search\":{\"provider\":\"local\",\"options\":{\"placeholder\":\"Search Jetstream Docs...\",\"miniSearch\":{}}}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script> </body> </html>