SubmitButton

A themed button with an animated spinner. OOTB styling is deliberately sparse.

Default Submit Button

Tailwind CSS styles are applied.

<submit-button
    class="px-4 py-2 font-medium rounded text-white bg-vxvue hover:bg-vxvue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-vxvue"
    @submit="doSubmit"
    :busy="busy"
>
    Submit button
</submit-button>

Result

Disabled Submit Button

<submit-button
    class="px-4 py-2 font-medium rounded text-white bg-vxvue hover:bg-vxvue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-vxvue"
    :disabled="true"
>
    Submit button
</submit-button>

Result

Themed Submit Button

Two themes are available: success and error.

<submit-button
    class="px-4 py-2 font-medium rounded focus:outline-none focus:ring-2 focus:ring-offset-2"
    @submit="doSubmit"
    :busy="busy"
    theme="success"
>
    Submit button
</submit-button>

Result

<submit-button
    class="px-4 py-2 font-medium rounded focus:outline-none focus:ring-2 focus:ring-offset-2"
    @submit="doSubmit"
    :busy="busy"
    theme="error"
>
    Submit button
</submit-button>

Result

Submit Button With Custom Spinner Class

<submit-button
    class="px-4 py-2 font-medium rounded text-white bg-vxvue hover:bg-vxvue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-vxvue"
    @submit="doSubmit"
    :busy="busy"
    spinner-class="size-8 text-amber-500"
>
    Submit button
</submit-button>

Result

Properties

Name	Type	Default	Description
busy	Boolean	false	Disables user interaction and changes appearance of button, displays spinner
spinner-class	String		A string which partially replaces the class string of the spinner; useful for setting size and color of spinner
theme	String		Possible values are success and error; applies a matching color theme to both button and spinner

Events

Name	Arguments	Description
submit		Emitted when user clicks a non-busy and not disabled button

Slots

Name	Scoped	Description
default		The label on the button