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".
<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>
<x-bladewind.button disabled="true">disabled button</x-bladewind.button>
<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>
<x-bladewind.button
type="secondary">
subscribe now
</x-bladewind.button/>
<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>
<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>
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>
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.
<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>
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>
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,
...
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>
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.
The table below shows a comprehensive list of all the attributes available for the Button component.
| 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 |
<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>
resources > views > components > bladewind > button.blade.php