bladewindUI

Button

The default primary colour theme for BladewindUI buttons is blue. It is possible to set a colour attribute to display our button in different colours. These are however a definite list of colours. You can check out our customization notes on how to use a different primary theme colour if you'd prefer a colour not defined in our list.

By default the component uses the <button> tag to build the button. If you find yourself in the category of developers who prefer to use the <a> tag for their buttons, you will need to specify the attribute tag="a".


Primary Button

                
                    <x-bladewind.button>subscribe now</x-bladewind.button/>
                
            

Subscribe Now
                
                    // this button is created using the <a> tag
                    // you can inspect element on the above button to check

                    <x-bladewind.button tag="a">subscribe now</x-bladewind.button/>
                
            

 

Different Sizes

        

                
                    <x-bladewind.button size="tiny">Save</x-bladewind.button>
                
            
                
                    <x-bladewind.button size="small">Subscribe</x-bladewind.button>
                
            
                
                    <x-bladewind.button size="regular">Subscribe</x-bladewind.button>
                
            
                
                    <x-bladewind.button size="big">Save User</x-bladewind.button>
                
            

 

Secondary Button

                
                    <x-bladewind.button 
                        type="secondary">
                        subscribe now
                    </x-bladewind.button/>
                
            

 

Different Sizes



                
                    <x-bladewind.button
                         type="secondary" 
                         size="tiny">Save</x-bladewind.button>
                
            
                
                    <x-bladewind.button
                         type="secondary" 
                         size="small">Subscribe</x-bladewind.button>
                
            
                
                    <x-bladewind.button
                         type="secondary" 
                         size="regular">Subscribe</x-bladewind.button>
                
            
                
                    <x-bladewind.button
                         type="secondary" 
                         size="big">Save User</x-bladewind.button>
                
            

 

With Spinners

Buttons can have spinners. This is useful when indicating progress of a form submission or progress of any other action. The button spinners use the BladewindUI Spinner component.

Spinners can be activated on buttons by setting the has_spinner="true" attribute. This creates a button with a spinner but, the spinners are hidden by default. The assumption is, you want a button with a spinner but you want to show the spinner when the button is clicked. If you want the spinner to be visible by default you can set the attribute show_spinner="true".

  

                
                    <x-bladewind.button
                        has_spinner="true" 
                        show_spinner="true">
                        Saving...
                    </x-bladewind.button>
                
            

It is possible to trigger the spinning effect when the button is clicked. This can be achieved using the helper functions bundled with BladewindUI. In this case you will need to set the name and onclick attributes of the button.

  

                
                    <x-bladewind.button
                        has_spinner="true" 
                        name="save-user" 
                        onclick="unhide('.save-user .bw-spinner')">
                        Click for my spinner
                    </x-bladewind.button>
                
            

 

Form Submission

By default the button component is rendered as <button type="button".... This default button behavior will not submit forms. To enable form submission, set this attribute on the button, can_submit="true". The resulting html for the button will be <button type="submit"....

                
                    <x-bladewind.button
                        can_submit="true"
                        class="mx-auto block">click me to submit</x-bladewind.button>
                
            

 

Colored Button

Only primary buttons can take on different colors. If the default blue color doesn't do it for you, there are eight other colour options to pick from.

 

                
                    <x-bladewind.button color="red">
                        look ma! i am red
                    </x-bladewind.button>

                    <x-bladewind.button color="yellow">
                        look ma! i am yellow
                    </x-bladewind.button>

                    <x-bladewind.button color="green">
                        look ma! i am green
                    </x-bladewind.button>

                    <x-bladewind.button color="pink">
                        look ma! i am pink
                    </x-bladewind.button>

                    <x-bladewind.button color="cyan">
                        look ma! i am cyan
                    </x-bladewind.button>

                    <x-bladewind.button color="black">
                        look ma! i am black
                    </x-bladewind.button>

                    <x-bladewind.button color="purple">
                        look ma! i am purple
                    </x-bladewind.button>

                    <x-bladewind.button color="orange">
                        look ma! i am orange
                    </x-bladewind.button>

                    <x-bladewind.button>look ma! i am blue</x-bladewind.button>
                
            

Assuming you decide to use a different primary button colour throughout your application, say purple, specifying color="purple" everytime you create a button can get quite tedious. We advise you instead open up the resources > views > components > bladewind > button.blade.php file and change the blue value on the line that says 'color' => 'blue',.

 

Button Events

The Bladewind button component translates to a regular HTML <button... tag. This means you can literally append any HTML button event attribute (onclick, onblur, onmouseover, onmouseout etc) to the component and it will be fired.

                
                    <x-bladewind.button
                        onclick="alert('you clicked me')">
                        click me to submit
                    </x-bladewind.button>
                
            

 

Colored Button

Only primary buttons can take on different colors. If the default blue color doesn't do it for you, there are eight other colour options to pick from.

 

                
                    <x-bladewind.button color="red">
                        look ma! i am red
                    </x-bladewind.button>

                    <x-bladewind.button color="yellow">
                        look ma! i am yellow
                    </x-bladewind.button>

                    <x-bladewind.button color="green">
                        look ma! i am green
                    </x-bladewind.button>

                    <x-bladewind.button color="pink">
                        look ma! i am pink
                    </x-bladewind.button>

                    <x-bladewind.button color="cyan">
                        look ma! i am cyan
                    </x-bladewind.button>

                    <x-bladewind.button color="black">
                        look ma! i am black
                    </x-bladewind.button>

                    <x-bladewind.button color="purple">
                        look ma! i am purple
                    </x-bladewind.button>

                    <x-bladewind.button color="orange">
                        look ma! i am orange
                    </x-bladewind.button>

                    <x-bladewind.button>look ma! i am blue</x-bladewind.button>
                
            

Assuming you decide to use a different primary button colour throughout your application, say purple, specifying color="purple" everytime you create a button can get quite tedious. We advise you instead open up the resources > views > components > bladewind > button.blade.php file and change the blue value on the line that says 'color' => 'blue',.

 

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Button component.

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
type primary primary secondary
size regular tiny small regular big
name blank This name is added to the button's class attribute just for convenience. This name can then be used to access the button via javascript or css.
has_spinner false Defines if the button should include a spinner. The value must be a string and not boolean.
true false
show_spinner false This only applies if has_spinner="true". By default the spinner, even if enabled is hidden. This attribute sets the default visibility of the spinner. The value must be a string and not boolean.
true false
color blue Set the color of the button.
blue red yellow greenpurple pink orange black cyan
can_submit false By default the button component is rendered as <button type="button".... This default behavior will not work for submitting forms. To enable form submission, set can_submit="true". The resulting html for the button will be <button type="submit".... .
true false
disabled false Defines if the button should be disabled or enabled.
true false
tag button Specifies which html tag to use in creating the button.
button a

 

Button with all attributes defined

                
                    <x-bladewind.button 
                        type="secondary"
                        size="big"
                        name="btn-subscribe"
                        has_spinner="true"
                        show_spinner="false"
                        disabled="false"
                        class="mt-0"
                        tag="a"
                        can_submit="false">
                        ...
                    </x-bladewind.button>
                
            

 

The source file for this component is available in resources > views > components > bladewind > button.blade.php