In Laravel 11, Blade components make it easy to create reusable UI elements that improve code structure and maintainability. By using dynamic props and slots, you can pass data and customize these components efficiently, making them highly flexible.

In this guide, I will walk you through the process of building custom Blade components with dynamic props and slots. We’ll explore examples like reusable forms, buttons, and modals, helping you develop dynamic, efficient user interfaces.

Dynamic Blade Components with Props and Slots in Laravel 11

 

Laravel provides an easy way to generate Blade components. Let’s start by creating a simple button component.

Run the following Artisan command:

php artisan make:component Button

This will create two files:

• app/View/Components/Button.php (for the logic)
• resources/views/components/button.blade.php (for the template)

 

In the Button.php class, you can define dynamic props that can be passed to the component.

Button.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Button extends Component
{
    public $type;
    public $text;

    public function __construct($type = 'button', $text = 'Click Me')
    {
        $this->type = $type;
        $this->text = $text;
    }

    public function render()
    {
        return view('components.button');
    }
}

In this example, the type and text props are defined, with default values for a button type and the button text.

 

Now, let’s use these dynamic props in the Blade template.

button.blade.php

<button type="{{ $type }}" class="btn btn-primary">
    {{ $slot ?? $text }}
</button>

Here, we use both the dynamic type and text props, and we add a fallback using {{ $slot ?? $text }} so that if no slot is provided, it will display the text prop.

 

Now, you can use the button component in any Blade view.

<x-button type="submit" text="Submit Form" />

This will render a button with the text "Submit Form." You can also override the default text using a slot.

<x-button type="submit">Submit Now</x-button>

 

Let’s create a more advanced example: a reusable modal component with dynamic props and slots.

Create the component:

php artisan make:component Modal

Modal.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Modal extends Component
{
    public $id;
    public $title;

    public function __construct($id, $title = 'Default Title')
    {
        $this->id = $id;
        $this->title = $title;
    }

    public function render()
    {
        return view('components.modal');
    }
}

Here, we define id and title as props for the modal, with title having a default value.

 

modal.blade.php

<div class="modal fade" id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $id }}Label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="{{ $id }}Label">{{ $title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{ $slot }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

In this template, the modal body is flexible and defined by the slot content, allowing you to customize the content dynamically when you use the component.

 

You can now use the modal component in a Blade view.

<x-modal id="exampleModal" title="Custom Modal Title">
    <p>This is the dynamic content inside the modal!</p>
</x-modal>

This will render a modal with the specified title and dynamic content inside the modal body.

 

Finally, let’s create a reusable form component that allows passing form action and method as dynamic props.

Create the component:

php artisan make:component Form

Form.php:

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Form extends Component
{
    public $action;
    public $method;

    public function __construct($action, $method = 'POST')
    {
        $this->action = $action;
        $this->method = $method;
    }

    public function render()
    {
        return view('components.form');
    }
}

 

form.blade.php

<form action="{{ $action }}" method="{{ $method }}">
    {{ $slot }}
</form>

This form allows you to dynamically change the form action and method while using slots for the form fields.

 

This allows for a flexible, reusable form component with dynamic form fields and actions. 

<x-form action="/submit-form" method="POST">
    <input type="text" name="name" placeholder="Enter your name">
    <button type="submit">Submit</button>
</x-form>

 

---

You might also like:

• Read Also: Implementing Event Sourcing in Laravel 11 for Audit Trails
• Read Also: How to Create Multi Step Form in Laravel 11
• Read Also: Laravel 10 Contact Form: Send Email using Gmail SMTP
• Read Also: How To Validate Form Using jQuery Validate.js