Skip to content

SubmitButton

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

Default Submit Button

Tailwind CSS styles are applied.

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

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

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

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

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

NameTypeDefaultDescription
busyBooleanfalseDisables user interaction and changes appearance of button, displays spinner
spinner-classStringA string which partially replaces the class string of the spinner; useful for setting size and color of spinner
themeStringPossible values are success and error; applies a matching color theme to both button and spinner

Events

NameArgumentsDescription
submitEmitted when user clicks a non-busy and not disabled button

Slots

NameScopedDescription
defaultThe label on the button