Button

Універсальна кнопка зі станами завантаження, іконками та кількома варіантами.

Живе демо

З іконками

Стани

Як посилання

Передайте to, і кнопка відрендериться як справжнє <a href>, тож працюють пошукові роботи, клік середньою кнопкою та «відкрити в новій вкладці». Внутрішні шляхи навігуються через Vue router, якщо його встановлено (у Nuxt — завжди), без перезавантаження сторінки. Зовнішні URL, tel: / mailto: і #hash-посилання обробляє браузер. Поки disabled або loading, рендериться <button>.

Внутрішнє посилання

Напишіть нам

<template>
  <orio-button to="/reserve">Book a table</orio-button>
  <orio-button to="tel:+31165564090" variant="secondary">Call us</orio-button>
</template>

Використання

Базове

<template>
  <orio-button @click="handleClick">
    Click Me
  </orio-button>
</template>

<script setup>
function handleClick() {
  console.log('Clicked!')
}
</script>

Варіанти кнопки

<orio-button variant="primary">Primary</orio-button>
<orio-button variant="secondary">Secondary</orio-button>
<orio-button variant="subdued">Subdued</orio-button>

З іконками

<!-- Icon before text -->
<orio-button icon="edit">Edit</orio-button>

<!-- Icon only (automatically rounds to circle) -->
<orio-button icon="plus" />

Стан завантаження

<template>
  <orio-button :loading="isLoading" @click="save">
    Save Changes
  </orio-button>
</template>

<script setup>
const isLoading = ref(false)

async function save() {
  isLoading.value = true
  await api.save()
  isLoading.value = false
}
</script>

Пропси

Проп	Тип	За замовчуванням	Опис
variant	'primary' | 'secondary' | 'subdued'	'primary'	Візуальний стиль кнопки
icon	string	undefined	Назва іконки з реєстру іконок
loading	boolean	false	Показує індикатор завантаження, блокує кліки
disabled	boolean	false	Вимикає взаємодію з кнопкою
to	RouteLocationRaw	undefined	Рендерити як справжнє <a href> (навігація роутером для внутрішніх шляхів); ігнорується, поки disabled/loading

Примітка: нативний HTML-атрибут type (наприклад, type="submit") можна використовувати як зазвичай через v-bind — він передається на внутрішній елемент <button>.

Події

Подія	Дані	Опис
click	PointerEvent	Генерується під час кліку (коли не loading/disabled)

Слоти

Слот	Пропси	Опис
default	-	Текстовий вміст кнопки
icon	-	Власний вміст іконки

Стилізація

Кнопка використовує такі CSS-змінні:

--color-accent       /* Primary button background */
--color-accent-ink   /* Text color on primary */
--color-accent-hover /* Hover state */
--color-accent-border