vue-button — Vue 3 button SFC with loading state

Vue 3 single-file component with Composition API (<script setup>). Same variants/sizes as the Latte button component but emits click events natively and adds a loading state with a built-in spinner.

Use it in Vue 3 SPAs / SFC pages inside CzG projects (newer projects). For Vue 2 or static Latte/SCSS contexts, use the regular button component.

Stability: beta. API may shift before 1.0 — pin a version in

czg-ui.lock.json if you depend on it heavily.

Install

npx czg-ui add vue-button

// resources/js/app.js — global registration
import { createApp } from 'vue';
import VButton from '@/components/VButton.vue';

const app = createApp({ /* ... */ });
app.component('VButton', VButton);

Or local import per component:

<script setup>
import VButton from '@/components/VButton.vue';
</script>

Requires base (SCSS variables/mixins) and Vue 3+.

Props

Events

Usage

<template>
    <VButton variant="primary" size="lg" :loading="isSaving" @click="save">
        Uložit změny
    </VButton>

    <VButton variant="ghost" @click="cancel">Zrušit</VButton>
</template>

<script setup>
import { ref } from 'vue';
import VButton from '@/components/VButton.vue';

const isSaving = ref(false);

async function save() {
    isSaving.value = true;
    try {
        await api.save();
    } finally {
        isSaving.value = false;
    }
}

function cancel() { /* ... */ }
</script>

When NOT to use

• Vue 2 projects — Composition API requires Vue 3; pick the Latte

button instead, or backport with @vue/composition-api

• Pure Latte pages — adding Vue runtime just for a button is wasteful
• Sentinels for routes / form submits — Vue Router / form submit

handlers are cleaner; click event is for ad-hoc actions

Live preview

ui.czechgroup.cz/component/vue-button