v2.7.0
tailwind.config.js file as described here.
If you don't set this, your buttons will be transparent.This documentation website has set the primary colour theme to indigo so all BladewindUI components will use this primary colour to maintain consistency.
<x-bladewind::button>Subscribe Now</x-bladewind::button>
<x-bladewind::button uppercasing="false">
Subscribe Now
</x-bladewind::button>
By default the component uses the <button> tag to build the button. To use the <a> tag to build the button, you will need to specify
the attribute tag="a".
<!--
// 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>
BladewindUI buttons come in four types. We believe these four cover what is required in most projects. There are primary, secondary and circular buttons. Outline buttons exist in these three types.
These buttons depend on the primary colour defined in your project's tailwind.config.js. Please ensure this is defined.
<x-bladewind::button>Primary Button</x-bladewind::button>
<x-bladewind::button outline="true">Primary Button</x-bladewind::button>
The secondary buttons depend on the secondary colour defined in your project's tailwind.config.js. Please ensure this is defined.
<x-bladewind::button type="secondary">Secondary Button</x-bladewind::button>
<x-bladewind::button type="secondary" outline="true">
Secondary Button
</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="bell-alert" />
<x-bladewind::button.circle outline="true" icon="bell-alert" />
Bladewind determines which button type (primary or secondary) to display based on the type attribute. The circular buttons
however, set type="circular" so it is technically not possible to define a secondary circular button. A workaround, if you wish to have a
secondary circular button is to set color="secondary"
<x-bladewind::button.circle color="secondary" outline icon="bell-alert" />
Buttons can exist as outlines only. This can be achieved by setting the attribute outline="true".
The outline picks up the value of the color attribute if you are using a primary button.
Secondary buttons just have one colour so a secondary outline button picks up that colour. All other attributes defined on the button like radius are preserved.
The button only loses its background colour.
<x-bladewind::button radius="full" outline="true" color="cyan">Cyan outline</x-bladewind::button>
<x-bladewind::button radius="full" outline="true" type="secondary">Secondary outline</x-bladewind::button>
By default, outline buttons use the TailwindCSS border-2 width. You can modify the border width
and specify any of the other supported TailwindCSS border widths without the "border-" prefix by setting the
border_width attribute.
<x-bladewind::button outline="true" border_width="2">Border 2</x-bladewind::button>
<x-bladewind::button outline="true" border_width="4">Border 4</x-bladewind::button>
<x-bladewind::button outline="true" border_width="8">Border 8</x-bladewind::button>
BladewindUI buttons can exist in a couple of states. Probably states isn't the right term for these but let's stick with that for lack of a better term/
<x-bladewind::button show_focus_ring="false">no focus ring</x-bladewind::button>
<x-bladewind::button>default</x-bladewind::button>
<x-bladewind::button ring_width="1">ring 1</x-bladewind::button>
<x-bladewind::button ring_width="2">ring 2</x-bladewind::button>
<x-bladewind::button ring_width="4">ring 4</x-bladewind::button>
<x-bladewind::button ring_width="8">ring 8</x-bladewind::button>
<x-bladewind::button disabled="true">disabled</x-bladewind::button>
<x-bladewind::button
disabled="true"
type="secondary">
disabled secondary
</x-bladewind::button>
<x-bladewind::button disabled outline>disabled outline</x-bladewind::button>
Each button type has a corresponding size. The available sizes are tiny
small regular and big.
The default size is regular.
<x-bladewind::button size="tiny">tiny</x-bladewind::button>
<x-bladewind::button size="small">small</x-bladewind::button>
<x-bladewind::button size="regular">default</x-bladewind::button>
<x-bladewind::button>default</x-bladewind::button>
<x-bladewind::button size="medium">medium</x-bladewind::button>
<x-bladewind::button.circle size="medium">medium</x-bladewind::button.circle>
<x-bladewind::button size="big">big</x-bladewind::button>
Different developers have different button radius preferences. The default Bladewind buttons go for a full radius making the buttons very rounded.
The component provides a way to change the radius of the button by setting the radius attribute.
<x-bladewind::button radius="none">none</x-bladewind::button>
<!-- this is the default so radius="small" can be omitted -->
<x-bladewind::button radius="small">small</x-bladewind::button>
<x-bladewind::button>small</x-bladewind::button>
<x-bladewind::button radius="medium">medium</x-bladewind::button>
<x-bladewind::button radius="full">full</x-bladewind::button>
<x-bladewind::button type="secondary" radius="none">none</x-bladewind::button>
<x-bladewind::button type="secondary" radius="small">small</x-bladewind::button>
<x-bladewind::button type="secondary" radius="medium">medium</x-bladewind::button>
<x-bladewind::button type="secondary" radius="full">full</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="showButtonSpinner('.save-user')">
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 icon="arrow-path" icon_right="true">
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 colours. Ideally you should define a primary colour and let your primary buttons stick with that. If you need to in rare cases, use
other coloured buttons that are different from your primary button colour, this component provides that. An example of such a case is where your primary colour is purple but your delete buttons need to be red for emphasis.
Set the color attribute to your preferred colour.
<x-bladewind::button color="red">red button</x-bladewind::button>
Simply replace color="red" with your preferred colour.
The colours above are the only ones precompiled into BladewindUI.
The default blue colour is tied to the primary: colors.blue attribute defined in the tailwind.config.js file.
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.
// your project's 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 table below shows a comprehensive list of all the attributes available for the Button component.
| Option | Default | Available Values |
|---|---|---|
| type | primary | Type of button to display. primary secondary |
| size | regular | Specify the size of the button. These sizes match input field sizes to maintain consistency. tiny small regular medium 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
violet indigo fuchsia |
| uppercasing | true | Determines if the button text is all uppercase. If false, the text will be displayed as you entered it. true false |
| 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 |
| outline | false | Should button be displayed only as an outline. All background colour is lost. true false |
| border_width | 2 | Only used if outline=true. How thick should the button border be. 2 4 8 |
| ring_width | blank | Set the width of the focus ring. 1 2 4 8 |
| 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"
outline="true"
border_width="2"
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