Larastrap
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-316b985c820b384ecfe3e80289beae83" class="btn btn-primary">Primary</button> <button id="button-2fcdadb5df1308e2d84165602ebc6f0d" class="btn btn-secondary">Secondary</button> <button id="button-02d39304109c49263dbf6c532423ee72" class="btn btn-success">Success</button> <button id="button-ee78cf626863bfed56b16ec3c0e84156" class="btn btn-danger">Danger</button> <button id="button-891c5a33efbf364228f424bab5cbb26b" class="btn btn-warning">Warning</button> <button id="button-72c04852ca70a16862670b0db7eb9495" class="btn btn-info">Info</button> <button id="button-3e76f24d3ac4831758d8342f384eb45c" class="btn btn-light">Light</button> <button id="button-7a68684a7827f43d4c430d2b5bda689c" class="btn btn-dark">Dark</button> <button id="button-c4875c078ab1c4fbb9d1c881b1049422" class="btn btn-link">Link</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-e5a509a75e086aaf053ee062e75529ea" class="btn btn-primary btn-sm">Small button</button> <button id="button-3c1d58d8b91fb630c7b25e8f2e4941cd" class="btn btn-primary">Normal button</button> <button id="button-b0709aca6e1847964fd6aa1fabf03735" class="btn btn-primary btn-lg">Large 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-b46cb9e4393539b0ed72898150541128" class="btn btn-primary">This is pre: Label</button> <button id="button-3108841c07ec5977232acaf1c27934ea" 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-ed3a5795c400212c2c195aad394b01bc" 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-092f6385eb4b4600de9269404b83b05a" 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-1820b36de5ca1db8d8d5ff45881cf319" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><a id="link-8cdeee6f75d4b84c258ada91ec1b7236" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#test-collapse" href="#">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-e19a734d866ac99052ce8215da23d933" class="btn btn-info" href="https://larastrap.madbob.org">Yes, this is an anchor</a>