How do I pass additional HTML attributes to a Blade component

The `$attributes` variable contains all the attributes that were passed to the component but were not defined as props. You can render these attributes on the root element of your component using the `< $attributes >` directive.

For example, let's say you have a `` component with the following template:

html
<button {{ $attributes }}>
    {{ $slot }}
</button>

In your parent view, you can pass additional attributes to the component like this:

html
<x-button class="btn btn-primary" wire:click="doSomething">
    Click me
</x-button>

The `class` and `wire:click` attributes will be rendered on the `` element in the component's template.

html
<button class="btn btn-primary" wire:click="doSomething">
    Click me
</button>

If you want to merge the passed attributes with some default classes, you can use the `merge()` method on the `$attributes` variable:

html
<button {{ $attributes->merge(['class' => 'btn']) }}>
    {{ $slot }}
</button>

Now, if no `class` attribute is passed to the component, it will have the default `btn` class. If a `class` attribute is passed, it will be merged with the default class.

This allows you to pass arbitrary HTML attributes to your components and have them rendered on the root element, making your components more flexible and reusable[1][4][5].

Citations:
[1] https://laravel.com/docs/11.x/blade
[2] https://laracasts.com/discuss/channels/laravel/passing-attributes-to-blade-components
[3] https://github.com/laravel/framework/issues/50994
[4] https://www.fundaofwebit.com/post/laravel-blade-components-tutorial-with-example-all-about-components-in-laravel
[5] https://tighten.com/insights/extensible-blade-components/