Skip to content

Latest commit

 

History

History
108 lines (79 loc) · 3.07 KB

simple-button.md

File metadata and controls

108 lines (79 loc) · 3.07 KB
Raw

Simple button

<x-btn text="Do something" />

This will output the following HTML:

<button type="button" class="btn btn-primary">
    Do something
</button>

Example using common button attributes:

<x-btn type="reset"
    :text="trans('action.cancel')"
    title="Reset this form"
    variant="secondary" />

This will output the following HTML:

<button type="reset" class="btn btn-secondary" title="Reset this form" data-bs-toggle="tooltip">
    Cancel
</button>

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

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-btn text="Do something"
        confirm="Are you sure you want to do this?"
        :confirm-id="'do-something-'.$model->id"
    />

Type

The default type is "button" but you can obviously modify it. Possible values are: button, submit or reset.

    <x-btn type="submit" text="Do something" />

This will output the following HTML:

<button type="submit" class="btn btn-primary">
    Do something
</button>

It is a property of the component rather than a simple attribute to make it easier to extend the class component, or necessary in certain edge cases.

    <x-btn :type="$buttonType" />

Form ID

If you want the button to be able to submit a form (type="submit") and to be placed outside the form body you must specify the form identifier.

If you don't specify a form 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 form on which the button acts. It will be easier to navigate and this with better performance.

    <x-btn type="submit"
        text="Do something"
        :form-id="'do-something-'.$model->id"
    >

This will output the following HTML:

<button type="submit" form="form-button-do-something-42" class="btn btn-primary">
    Do something
</button>