Button

The primary and secondary colours for BladewindUI buttons is picked from what you define in your 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".

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>

Button Types

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.

Primary Buttons

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>

Secondary Buttons

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>

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

Outline Buttons

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>

Button States

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/

No Focus Rings

<x-bladewind::button show_focus_ring="false">no focus ring</x-bladewind::button>

Different Focus Ring Widths

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

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

Different Sizes

Each button type has a corresponding size. The available sizes are tiny small regular and big. The default size is regular.

Tiny

<x-bladewind::button size="tiny">tiny</x-bladewind::button>

Small

<x-bladewind::button size="small">small</x-bladewind::button>

Regular / Default

<x-bladewind::button size="regular">default</x-bladewind::button>

<x-bladewind::button>default</x-bladewind::button>

Medium

<x-bladewind::button size="medium">medium</x-bladewind::button>

<x-bladewind::button.circle size="medium">medium</x-bladewind::button.circle>

Big

<x-bladewind::button size="big">big</x-bladewind::button>

Different Radii

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>

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="showButtonSpinner('.save-user')">
    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 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>

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 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,
...

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>

Full List Of Attributes

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

IMPORTANT: All component text/labels can be found in lang/bladewind.php. You can translate these into your preferred languages

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`

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

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