View on GitLab


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.

label / color

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>

prelabel / postlabel

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="" />
<a id="link-6ba234afdbcf0a53f314c79237a00f2b" class="btn btn-primary" href="" 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).

Toggle Collapse

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::link triggers_collapse="test-collapse" label="Toggle Collapse" />
<x-larastrap::collapse id="test-collapse">
    <p>This is a collapse!</p>
<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">
      <div class="modal-body">
          This is a modal!
      <div class="modal-footer">
        <button id="button-54808efaf096421a2e640bf8e46406ad" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</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">
      This is a collapse!

Alternative: Links

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