Understanding Laravel Blade Template Component Attributes & Component Props

Laravel Blade components are a powerful way to break down your UI into reusable pieces. When working with these components, you’ll often pass data (props) and HTML attributes to them.

Let’s break down both concepts with clear examples.

What are Blade Component Props?

Props (short for properties) are data you pass into a component from the parent view when you use the component.

Example: Basic Component with Props

Let’s create a simple Alert component that accepts a type and message.

Run:

php artisan make:component Alert

This creates:

• app/View/Components/Alert.php (Logic)
• resources/views/components/alert.blade.php (View)

app/View/Components/Alert.php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public $type;
    public $message;

    public function __construct($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

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

resources/views/components/alert.blade.php

<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>

Using the Component

You can use this component anywhere like:

<x-alert type="success" message="User created successfully!" />

This will output:

<div class="alert alert-success">
    User created successfully!
</div>

---

What are Blade Component Attributes?

Attributes are extra HTML attributes (like class, id, style, etc.) you pass to the component. These are useful when you want to make your components customizable.

Example: Adding Attributes to the Alert

In resources/views/components/alert.blade.php, update to:

<div {{ $attributes->merge(['class' => 'alert alert-' . $type]) }}>
    {{ $message }}
</div>

Usage Example

<x-alert type="danger" message="Something went wrong!" class="font-bold" id="error-alert" />

This will output:

<div class="alert alert-danger font-bold" id="error-alert">
    Something went wrong!
</div>

• class="font-bold" gets merged with the default classes.
• id="error-alert" gets added as a normal attribute.

---

Combining Props & Attributes

• Props are for data the component needs to function.
• Attributes are for extra HTML attributes (like class, id, etc.)

Full Example

<x-alert type="info" message="This is an informational message." class="mt-4" />

Component HTML:

<div class="alert alert-info mt-4">
    This is an informational message.
</div>

---

Summary

Concept	Purpose	Example
Props	Pass data to the component.	type="success"
Attributes	Pass HTML attributes.	class="text-lg"

Both are very useful when building flexible, reusable components in Laravel.

---

Final Tip

You can also pass slot content like this:

<x-alert type="warning" class="mb-4">
    This is a warning message!
</x-alert>

And in the component:

<div {{ $attributes->merge(['class' => 'alert alert-' . $type]) }}>
    {{ $slot }}
</div>

This makes the component even more flexible!

---

Conclusion

Blade components + props + attributes = clean, reusable templates!