Кнопка

Отображает кнопку для действий в формах, тулбарах и навигации.

Установка

npx alixan-ui-nuxt add button

Использование

Стили Button строятся из двух независимых props: variant задает визуальный вес, а color задает intent действия. Комбинируйте их, чтобы получить нужный акцент без изменения смысла действия.

Заполненный

Контурный

Прозрачный

<script setup lang="ts">
import Button from '@/components/ui/button/Button.vue'
</script>

<template>
  <div class="space-y-4">
    <div class="flex flex-wrap items-center gap-2">
      <Button variant="filled" color="default">Default</Button>
      <Button variant="filled" color="primary">Primary</Button>
      <Button variant="filled" color="secondary">Secondary</Button>
      <Button variant="filled" color="destructive">Destructive</Button>
    </div>

    <div class="flex flex-wrap items-center gap-2">
      <Button variant="outlined" color="default">Default</Button>
      <Button variant="outlined" color="primary">Primary</Button>
      <Button variant="outlined" color="secondary">Secondary</Button>
      <Button variant="outlined" color="destructive">Destructive</Button>
    </div>

    <div class="flex flex-wrap items-center gap-2">
      <Button variant="ghost" color="default">Default</Button>
      <Button variant="ghost" color="primary">Primary</Button>
      <Button variant="ghost" color="secondary">Secondary</Button>
      <Button variant="ghost" color="destructive">Destructive</Button>
    </div>
  </div>
</template>

Размер

<script setup lang="ts">
import Button from '@/components/ui/button/Button.vue'
</script>

<template>
  <div class="flex items-center gap-2">
    <Button size="sm">
      Small
    </Button>
    <Button>
      Default
    </Button>
    <Button size="lg">
      Large
    </Button>
  </div>
</template>

<script setup lang="ts">
import Button from '@/components/ui/button/Button.vue'
</script>

<template>
  <div class="flex items-center gap-2">
    <Button :to="$localePath('/icon-button')">
      NuxtLink
    </Button>

    <Button
      href="https://github.com"
      target="_blank"
      variant="outlined"
    >
      External link
    </Button>
  </div>
</template>

С иконкой

<script setup lang="ts">
import { ArrowRight, GitBranch } from '@lucide/vue'
import Button from '@/components/ui/button/Button.vue'
</script>

<template>
  <div class="flex items-center gap-2">
    <Button variant="outlined">
      <template #leading>
        <GitBranch class="size-5" />
      </template>
      New Branch
    </Button>

    <Button variant="outlined">
      Continue
      <template #trailing>
        <ArrowRight class="size-5" />
      </template>
    </Button>
  </div>
</template>

Загрузка

Button не включает встроенное состояние spinner. Если кнопка крутится inline, пользователь все еще может уйти со страницы и потерять контекст действия. Global loader блокирует поверхность, показывает одну активную операцию и делает опыт понятнее.

<script setup lang="ts">
const loader = useGlobalLoader()

const save = () => {
  loader.show({ label: 'componentDocs.button.savingChanges' })

  window.setTimeout(() => {
    loader.hide()
  }, 3000)
}
</script>

<template>
  <Button @click="save">Save changes</Button>
</template>

Отключенное состояние

Лучше не отключать кнопки. Оставьте действие видимым и активным, а затем объясните предупреждением, почему оно не может выполниться. Так пользователь получает обратную связь вместо мертвого контрола.

<script setup lang="ts">
const dialog = useDialog()

const openAlert = () => {
  dialog.open(AlertDialog, {
    width: '360px',
    height: '280px',
    data: {
      title: 'componentDocs.button.actionUnavailable',
      description: 'componentDocs.button.exportUnavailable',
      buttonLabel: 'componentDocs.button.gotIt',
    },
  })
}
</script>

<template>
  <Button variant="outlined" @click="openAlert">
    Export report
  </Button>
</template>

Справочник API

Свойство	Тип	По умолчанию	Описание
label	string	-	Запасной текст, если default slot не используется.
variant	'filled' \| 'outlined' \| 'ghost'	'filled'	Стиль поверхности. Filled используется по умолчанию. Сочетайте его с color для intent.
color	'default' \| 'primary' \| 'secondary' \| 'destructive'	'default'	Семантический intent. Работает с каждым variant.
size	'sm' \| 'md' \| 'lg'	'md'	Управляет высотой, padding и размером текста.
to	RouteLocationRaw	-	Отображает кнопку как NuxtLink, если значение передано.
href	string	-	Отображает кнопку как нативную ссылку, если значение передано.
target	'_blank' \| '_self' \| '_parent' \| '_top'	-	Target ссылки. Работает с href-ссылками.
tooltip	string	-	Контент tooltip. Значения могут быть ключами переводов.