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-258d9f2d" class="btn btn-primary">Primary</button> <button id="button-58a9b586" class="btn btn-secondary">Secondary</button> <button id="button-8781a3c4" class="btn btn-success">Success</button> <button id="button-df8b3707" class="btn btn-danger">Danger</button> <button id="button-72d9283b" class="btn btn-warning">Warning</button> <button id="button-46cb3ab7" class="btn btn-info">Info</button> <button id="button-fa4dd6cd" class="btn btn-light">Light</button> <button id="button-065ea572" class="btn btn-dark">Dark</button> <button id="button-79eb1218" 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-6fe59f1f" 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-ea30d92f" class="btn btn-primary btn-sm">Small button</button> <button id="button-713bf4aa" class="btn btn-primary">Normal button</button> <button id="button-a34435e6" 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-c859e040" class="btn btn-primary" title="Title of the button">Just a button</button>
Acts just like plain disabled
HTML attribute, but also appends the CSS Bootstrap class with the same name and the accessible attribute aria-disabled="true"
.
<x-larastrap::button label="A disabled button" disabled />
<button id="button-f7bdc35f" class="btn btn-primary disabled" disabled aria-disabled="true">A disabled 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-63dd1845" class="btn btn-primary">This is pre: Label</button> <button id="button-61020acc" 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-98d5ed62" 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-b1337641" 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">
<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-fe3e620e" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><a id="link-cdce55dc" 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>