Aside from passing attribute data to blade components, sometimes you need to pass a large chunk of data. That data can be displayed through slots. Laravel renders the data by echoing out the $slot variable.

We’ll start by creating a button component. All we want to be able to do with our button component is change the inner-text. It’ll be located in resources/views/components/button.blade.php.

<button class="btn">
    {{ $slot }}
</button>

To use it, we’ll create a new Blade file: resources/views/blade-test/index.blade.php.

<x-button>
    Test
</x-button>

We just need a route to display it.

Route::get('/blade-slots', function () {
    return view('blade-slots.index');
});

And it worked. We got the result that we were hoping for. This template renders a button element with a class of 'btn', and the content of the button is defined by the $slot variable. You can use this template in other templates like this:

<!-- home.blade.php -->

@extends('app-layout')

@section('title', 'Home')

@section('content')
    <h1>Homepage Content!</h1>
    <x-button>
        Click me!
    </x-button>
@endsection

Slots are simple. Have fun with them!