Buttons can be used as standalone elements or - more frequently - combined with Forms and Modals. In the latter case, you can specify the proper parameters within the dedicated parent's attribute (usually: buttons ) instead to place the x-larastrap::button node in your template.
A x-larastrap::button
is defined essentially by a label
and, eventually, a color
(one defined by Bootstrap; defaults to primary
).
<x-larastrap::button label="Primary" color="primary" />
<x-larastrap::button label="Secondary" color="secondary" />
<x-larastrap::button label="Success" color="success" />
<x-larastrap::button label="Danger" color="danger" />
<x-larastrap::button label="Warning" color="warning" />
<x-larastrap::button label="Info" color="info" />
<x-larastrap::button label="Light" color="light" />
<x-larastrap::button label="Dark" color="dark" />
<x-larastrap::button label="Link" color="link" />
<button id="button-5d93c824b37d41cbc119f53ff078cb5d" class="btn btn-primary">Primary</button> <button id="button-cb50d34712c357002a49e16145f8cbf8" class="btn btn-secondary">Secondary</button> <button id="button-c00d0ba994360414927b7b6d0964bcd0" class="btn btn-success">Success</button> <button id="button-db6bf34232db06cb135da399204ab19c" class="btn btn-danger">Danger</button> <button id="button-5401e9dc8536be86ecc346d5eeb9a700" class="btn btn-warning">Warning</button> <button id="button-a2b97ef721d0f04caa9437c8524b8794" class="btn btn-info">Info</button> <button id="button-0f8c547dc7e5ea5b26e8fe8fa13c6600" class="btn btn-light">Light</button> <button id="button-f3ea567755fae0323cea2da068559fd8" class="btn btn-dark">Dark</button> <button id="button-768e2b207e7313f2482ecc821ee96d42" class="btn btn-link">Link</button>Used to force some HTML as the label of the button. String in label is escaped, in label_html it is not.
<x-larastrap::button label_html="<i class='bi bi-menu-button-wide-fill'></i>" />
<button id="button-b2f399a3905f46a51c965eb45d1921f6" class="btn btn-primary"></button>
Bootstrap provides three different sizes for buttons: the default one, sm
and lg
. Those can be set using the size
parameter.
<x-larastrap::button label="Small button" size="sm" />
<x-larastrap::button label="Normal button" />
<x-larastrap::button label="Large button" size="lg" />
<button id="button-cd98fd2f3d417ae55ca2f318d24b2660" class="btn btn-primary btn-sm">Small button</button> <button id="button-7d6cb494cc5d81b8f2bce59c83c66f1a" class="btn btn-primary">Normal button</button> <button id="button-371343e285a274f72fbf16dfaf96c088" class="btn btn-primary btn-lg">Large button</button>Title of the button. It is managed as a specific parameter in order to be translatable.
<x-larastrap::button label="Just a button" title="Title of the button" />
<button id="button-d043dc67f79a4ff6cbe06f46fc739520" class="btn btn-primary" title="Title of the button">Just a button</button>A peculiar feature is the ability to define a prefix or a postfix to the label , using prelabel or postlabel .
<x-larastrap::button label="Label" prelabel="This is pre: " />
<x-larastrap::button label="Label" postlabel=" - this is post" />
<button id="button-6c3fd8db1a1a2fddea1c2144e28a6853" class="btn btn-primary">This is pre: Label</button> <button id="button-b989e41e9a33298f4ca9cea05205be75" class="btn btn-primary">Label - this is post</button>The primary usage of this feature is to define your own custom elements placing texts, icons and other distinctive traits to buttons having the same purpose within the application.
[
'customs' => [
'rlink' => [
'extends' => 'link',
'params' => [
'postlabel' => ' <i class="bi bi-box-arrow-up-right"></i>',
'attributes' => ['target' => '_blank'],
]
]
]
]
<x-larastrap::rlink label="This link opens in a new tab" href="https://madbob.org/" />
<a id="link-6ba234afdbcf0a53f314c79237a00f2b" class="btn btn-primary" href="https://madbob.org/" target="_blank">This link opens in a new tab </a>As buttons are usually used to trigger Modals and Collapses, the relative triggers_modal and triggers_collapse parameters are conveniently provided: those will generate the HTML attributes used by Bootstrap to execute the proper JS functions.
Both must contain the HTML ID of the target node, with or without the prefix #
to complete the CSS selector (if missing, it is automatically added).
This is a collapse!
<x-larastrap::button label="Open Modal" triggers_modal="#test-modal" />
<x-larastrap::modal title="Test" id="test-modal">
<p>This is a modal!</p>
</x-larastrap::modal>
<x-larastrap::link triggers_collapse="test-collapse" label="Toggle Collapse" />
<x-larastrap::collapse id="test-collapse">
<p>This is a collapse!</p>
</x-larastrap::collapse>
<button id="button-7172c2f69d9c615199d6457efd66234a" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test-modal">Open Modal</button>
<div class="modal fade" id="test-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-none">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Test
</h5>
</div>
<div class="modal-body">
<p>
This is a modal!
</p>
</div>
<div class="modal-footer">
<button id="button-54808efaf096421a2e640bf8e46406ad" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><a id="link-f9160a5e96c09e2745c6afec5f8b07f2" class="btn btn-primary" href="#" data-bs-toggle="collapse" data-bs-target="#test-collapse">Toggle Collapse</a>
<div id="test-collapse" class="collapse">
<div class="card card-body">
<p>
This is a collapse!
</p>
</div>
</div>
An alternative to x-larastrap::button
is x-larastrap::link
, which generates an actual link (an <a>
HTML node). This component has all of the button's parameters, plus href
.
<x-larastrap::link label="Yes, this is an anchor" color="info" :href="route('homepage')" />
<a id="link-59610f5eda7b2b763bbd6832767512b4" class="btn btn-info" href="https://larastrap.madbob.org">Yes, this is an anchor</a>