logo
v2.4.3
LTR RTL

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>
        
    

        
            // 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>
        
    

Disabled Button

        
            <x-bladewind.button disabled="true">disabled button</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>
        
    

Different Radii

        
            <x-bladewind::button radius="none">No Radius</x-bladewind::button>
        
    
        
            <x-bladewind::button radius="small">Small Radius</x-bladewind::button>
        
    
        
            <x-bladewind::button radius="medium">Medium Radius</x-bladewind::button>
        
    
        
            <!-- this is the default so radius="full" can be omitted -->
            <x-bladewind::button radius="full">Full Radius</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>
        
    

With Icons

Buttons can have icons. To add an icon simply specify the icon name in the icon attribute. Refer to our Icon component page for details on icon names. Icons by default are positioned to the left of the button. You can set icon_right="true" to position the icon to the right of the button.

If you specify icon_right="true" and has_spinner="true", your icon will be ignored because the spinner is positioned to the right of the button.


        
            <x-bladewind.button icon="arrow-path">
                Refresh Page
            </x-bladewind.button>
        
    

        
            <x-bladewind.button
                type="secondary"
                icon="arrow-small-right"
                icon_right="true"">
                Next Chapter
            </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>
        
    

Coloured 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>
        
    

The nine colours above are the only ones precompiled into BladewindUI. The default blue colour is tied to the primary colour attribute defined in the tailwind.config.js file. primary: colors.blue. If you wish to use a different primary button colour, say indigo, you will need to define that colour in your project's tailwind.config.js file and the primary will automatically pick that colour. There is more on this here.

            
                // tailwind.config.js
                ...
                extend: {
                    colors: {
                        primary: colors.indigo,
                ...
            
        

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>
        
    

Circular Buttons

The Bladewind button component provides a circular option that accepts ONLY icons. The Icon component page describes how to use icon names. Just like the non-circular buttons, these can exist as primary or secondary and in all colour flavours.

        
            <x-bladewind.button.circle icon="pencil" />

            <x-bladewind.button.circle icon="trash" color="red" />

            <x-bladewind.button.circle icon="refresh" type="secondary" show_ring="false" />
        
    

Circular buttons come in the same sizes as non-circular buttons. Both button shapes are equal in height.

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 primary Set the colour of the button. The default is picked from what has been defined as the primary colour in your tailwind.config.js file. BladewindUI sets the default to blue.


primary 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
show_focus_ring true By default buttons are displayed with a ring around them when they have focus. This attribute can disable that.

true false
icon blank Defines if the button should have an icon. All Heroicons icon names can be specified.
icon_right false Defines if the icon should be positioned to the right of the button. Takes effect only is icon is not blank.

true false
tag button Specifies which html tag to use in creating the button.

button a
radius full Specifies how round the button should look.

none small medium full
button_text_css blank The button text colour has been predetermined by the button colour and respective shades. It is however possible to overwrite the colour of the button text. If the css you specify has already been precompiled into the BladewindUI css file, it will be used. If not, you need to ensure the css you specify exists in your project's css file

any of the TailwindCss styles

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"
                show_focus_ring="false"
                radius="medium"
                icon="lock-closed"
                icon_right="false"
                button_text_css="font-bold text-black
                can_submit="false">
                ...
            </x-bladewind.button>
        
    
The source file for this component is available in resources > views > components > bladewind > button.blade.php