Кнопки

Используйте такие-же кнопки как в интерфейсе самой Луны

Обычные

<button class="button">Обычная</button>
<button class="button primary">Первичная</button>
<button class="button dangerous">Опасная</button>
<button class="button button-icon icon-download"></button>
<button class="button button-icon button-transparent icon-dots"></button>

Группы кнопок

<div class="buttons">
    <button class="button">Обычная</button>
    <button class="button primary">Первичная</button>
    <button class="button dangerous">Опасная</button>
</div>

Кнопка с индикатором загрузки (ButtonBusy)

Компонент ButtonBusy используется для отправки форм и асинхронных запросов. При активации он блокирует повторные нажатия и отображает индикатор (крутилку) ожидания.

<setup type="ts">
import { ref } from 'vue';
import { ButtonBusy } from 'luna';

const busy = ref(false);

const runButton = () => {
  busy.value = true;
  setTimeout(() => {
      busy.value = false;
  }, 1000);
}
</setup>

<template>
    <ButtonBusy :busy="busy" :disabled="busy"
                @click="runButton" class="primary">
        Запуск
    </ButtonBusy>
</template>