← Laravel / PHP

Building a Small Blade Component

Turning repeated link markup into a reusable component without overcomplicating it.

Building a Small Blade Component

When the same styled link appears in several views, a Blade component can keep the markup in one place while still allowing each use to supply its own destination and label.

Create an anonymous component at resources/views/components/topic-link.blade.php:

@props(['href'])

<a
    href="{{ $href }}"
    {{ $attributes->merge([
        'class' => 'rounded-lg bg-stone-900 px-4 py-3 text-stone-100 hover:bg-stone-800',
    ]) }}
>
    {{ $slot }}
</a>

Then use it from another Blade view:

<x-topic-link :href="route('topics.show', 'laravel-php')">
    Laravel / PHP
</x-topic-link>

The attribute merge is useful because a caller can add classes or accessibility attributes without changing the component itself:

<x-topic-link href="/topics/css" class="font-semibold" aria-label="Read CSS articles">
    CSS
</x-topic-link>

For a one-off link, ordinary HTML is clearer. The component starts earning its keep once the visual pattern appears in multiple places.