Buttons

There are five button types and two props: classNames (which takes strings separated by spaces) and type (which is used for cancel buttons and buttons we don't want to use in forms as 'submit').

e.g.
The default button is used like this:
<x-bl.button>Button</x-bl.button>
The a non-submit default button is used like this:
<x-bl.button type='none' >Button</x-bl.button>
The save button is used like this:
<x-bl.button classNames='save'>Save</x-bl.button>
The delete button is used like this:
<x-bl.button classNames='delete'>Delete</x-bl.button>
The disabled button is used like this:
<x-bl.button classNames='disabled'>Disabled</x-bl.button>
For submit forms, cancel button has a prop: route (that takes the desired route), and is used like this:
<x-bl.button route="{{ route('users.index') }}" type='cancel' classNames='cancel'>Cancel</x-bl.button>
For modal forms, cancel button is used like this:
<x-bl.button type='cancel' classNames='cancel'>Cancel</x-bl.button>

Adding the 'disabled' class to any button overrides its settings and makes it look like a disabled button.

If using > 1 buttons, e.g. in a form, there's a convenience class for a div to wrap them: .bl-button-box
Use it like this:

<!-- Example 1: for submit form --> <div class='bl-button-box'> <x-bl.button route="{{ route('users.index') }}" type='cancel' classNames='cancel'>Cancel</x-bl.button> <x-bl.button classNames='save'>Save</x-bl.button> </div> <!-- Example 2: for modal --> <div class='bl-button-box'> <x-bl.button type='cancel' classNames='cancel'>Cancel</x-bl.button> <x-bl.button classNames='save'>Save</x-bl.button> </div>

The button-box might be made a separate component in future.