link-button.md

Link button

This component aims to unify the behaviors of <a> element which are used as buttons. For example by assigning them the role="button" property by default. But it is not intended to be used to write "normal" links, for that just use HTML syntax.

    <x-link-button :url="route('do-something')" text="Do something" />

This will output the following HTML:

<a href="https://localhost/do-something" role="button" class="btn btn-primary">
    Do something
</a>

Link button specific attributes

All attributes set on the component are piped through on the button element. Also, like all buttons, this component accepts all common button attributes:

• Text
• Hide text
• Start and end content
• Icons
• Variant
• Outline and no-outline
• Sizes
• Title
• Confirm
• Confirm Variant
• Disabled

URL

This button attribute corresponds to the "href" attribute of the link that the button must follow.

    <x-link-button :url="route('do-something')">
        Do something
    </x-link-button>

Confirm ID

If you want to use the "Confirm" attribute an identifier for the "confirmation modal" must be specified.

You can specify a confirm ID targeted by the button. If you don't specify a confirm id, it will be randomly generated for each request using a random string of characters.

But this is not ideal, it is preferable that you identify yourself the target on which the button acts. It will be easier to navigate and this with better performance.

    <x-link-button
        :url="route('do-something', $model)"
        confirm="Are you sure you want to do this?"
        :confirm-id="'do-something-'.$model->id"
    >
        Do something
    </x-link-button>