docs

Author: salahhusa9

README.md

@@ -32,6 +32,23 @@ He accept all normal attributes of input tag and add some new attributes:
 - label-class: add class to label tag
 - other attributes will be added to input tag
 
+### Button component
+```html
+<x-template-components::button />
+```
+He accept all normal attributes of button tag and add some new attributes:
+- div-class: add class to div tag
+- span-text-class: add class to span tag that contain button text
+- indicator-progress-class: add class to span tag that contain button progress indicator
+- loading-text: text that will be shown when button is loading
+- spinner-class: add class to span tag that contain button spinner
+- other attributes will be added to button tag
+
+we support livewire loading state, so if you use livewire you can use loading state like this:
+```html
+<x-template-components::button wire:target="save" />
+```
+
 ## Supported Templates
 
 - [Vuexy](https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/dashboard-ecommerce.html)

config/template-components.php

@@ -12,8 +12,8 @@
         ],
         'button' => [
             'button' => 'btn',
-            'indicator-progress' => ' d-block',
-            'spinner-class'
+            'indicator-progress' => 'd-block',
+            'spinner-class' => 'spinner-border spinner-border-sm',
         ]
     ],
 ];

resources/views/components/button.blade.php

@@ -1,5 +1,5 @@
 <button {{ $attributes->merge(['class' => config('template-components.defult_classes.button.button')]) }} {{ $attributes }} wire:loading.attr="disabled">
-    <span wire:loading.remove wire:target="{{ $attributes->get('wire:target') }}" class="{{ $attributes->get('span-text') }}">
+    <span wire:loading.remove wire:target="{{ $attributes->get('wire:target') }}" class="{{ $attributes->get('span-text-class') }}">
         {{ $slot }}
     </span>