Skip to content

Latest commit

 

History

History
57 lines (42 loc) · 1.95 KB

link-button.md

File metadata and controls

57 lines (42 loc) · 1.95 KB
Raw

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" />

The url attribute is mandatory.

This will output the following HTML:

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

Form 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:

URL

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

    <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>