SButton

Кнопка.

В чем отличие от аналогов?

В отличие от популярных библиотек компонентов для Vue3:

1. В зависимости от контекста сам подбирает семантический элемент: анкор для ссылок или button для отправки формы.
2. Позволяет передать Link-элемент InertiaJS в качестве атрибута as.

Стандартный пример

Используйте color, outlined, transparent, disabled, small, loading и fullwidth чтобы задать стили кнопок.

Основной цвет

Основное действие

Дополнительное действие

Прозрачная кнопка

Недоступная кнопка

Маленькая кнопка

<SButton>Основное действие</SButton>
<SButton outlined>Дополнительное действие</SButton>
<SButton transparent>Прозрачная кнопка</SButton>
<SButton disabled>Недоступная кнопка</SButton>
<SButton small>Маленькая кнопка</SButton>

<template>
    <SButton>Основное действие</SButton>
    <SButton outlined>Дополнительное действие</SButton>
    <SButton transparent>Прозрачная кнопка</SButton>
    <SButton disabled>Недоступная кнопка</SButton>
    <SButton small>Маленькая кнопка</SButton>
</template>

<script setup>
import { SButton } from 'startup-ui'
</script>

Красная кнопка

Основное действие

Дополнительное действие

Прозрачная кнопка

Недоступная кнопка

Маленькая кнопка

<SButton color="red">Основное действие</SButton>
<SButton outlined color="red">Дополнительное действие</SButton>
<SButton transparent color="red">Прозрачная кнопка</SButton>
<SButton disabled color="red">Недоступная кнопка</SButton>
<SButton small color="red">Маленькая кнопка</SButton>

<template>
    <SButton color="red">Основное действие</SButton>
    <SButton outlined color="red">Дополнительное действие</SButton>
    <SButton transparent color="red">Прозрачная кнопка</SButton>
    <SButton disabled color="red">Недоступная кнопка</SButton>
    <SButton small color="red">Маленькая кнопка</SButton>
</template>

<script setup>
import { SButton } from 'startup-ui'
</script>

Зеленая кнопка

Основное действие

Дополнительное действие

Прозрачная кнопка

Недоступная кнопка

Маленькая кнопка

<SButton color="green">Основное действие</SButton>
<SButton outlined color="green">Дополнительное действие</SButton>
<SButton transparent color="green">Прозрачная кнопка</SButton>
<SButton disabled color="green">Недоступная кнопка</SButton>
<SButton small color="green">Маленькая кнопка</SButton>

<template>
    <SButton color="green">Основное действие</SButton>
    <SButton outlined color="green">Дополнительное действие</SButton>
    <SButton transparent color="green">Прозрачная кнопка</SButton>
    <SButton disabled color="green">Недоступная кнопка</SButton>
    <SButton small color="green">Маленькая кнопка</SButton>
</template>

<script setup>
import { SButton } from 'startup-ui'
</script>

Жёлтая кнопка

Основное действие

Дополнительное действие

Прозрачная кнопка

Недоступная кнопка

Маленькая кнопка

<SButton color="yellow">Основное действие</SButton>
<SButton outlined color="yellow">Дополнительное действие</SButton>
<SButton transparent color="yellow">Прозрачная кнопка</SButton>
<SButton disabled color="yellow">Недоступная кнопка</SButton>
<SButton small color="yellow">Маленькая кнопка</SButton>

<template>
    <SButton color="yellow">Основное действие</SButton>
    <SButton outlined color="yellow">Дополнительное действие</SButton>
    <SButton transparent color="yellow">Прозрачная кнопка</SButton>
    <SButton disabled color="yellow">Недоступная кнопка</SButton>
    <SButton small color="yellow">Маленькая кнопка</SButton>
</template>

<script setup>
import { SButton } from 'startup-ui'
</script>

Золотая кнопка

Акцент для «денежных» и премиум-действий (платные операции, запуск, оплата): градиент золота с тёмным текстом. Использует токены --s-gold, --s-gold-dark, --s-gold-lightest из палитры.

Запустить (≈ 210 ₽)

Дополнительное действие

Прозрачная кнопка

Недоступная кнопка

Маленькая кнопка

<SButton color="gold">Запустить (≈ 210 ₽)</SButton>
<SButton outlined color="gold">Дополнительное действие</SButton>
<SButton transparent color="gold">Прозрачная кнопка</SButton>
<SButton disabled color="gold">Недоступная кнопка</SButton>
<SButton small color="gold">Маленькая кнопка</SButton>

<template>
    <SButton color="gold">Запустить (≈ 210 ₽)</SButton>
    <SButton outlined color="gold">Дополнительное действие</SButton>
    <SButton transparent color="gold">Прозрачная кнопка</SButton>
    <SButton disabled color="gold">Недоступная кнопка</SButton>
    <SButton small color="gold">Маленькая кнопка</SButton>
</template>

<script setup>
import { SButton } from 'startup-ui'
</script>

Кнопка на всю ширину формы

Основное действие

Основное действие

Основное действие

Основное действие

<SButton fullwidth>Основное действие</SButton>
<SButton fullwidth color="red">Основное действие</SButton>
<SButton fullwidth color="green">Основное действие</SButton>
<SButton fullwidth color="yellow">Основное действие</SButton>

<template>
    <SButton fullwidth>Основное действие</SButton>
    <SButton fullwidth color="red">Основное действие</SButton>
    <SButton fullwidth color="green">Основное действие</SButton>
    <SButton fullwidth color="yellow">Основное действие</SButton>
</template>

<script setup>
import { SButton } from 'startup-ui'
</script>

Действия по кнопке

Отправка формы

Если кнопка внутри формы, то отправляет форму:

<template>
    <SForm method="post" action="/users/create">
        ...
        <SButton>Создать пользователя</SButton>
    </SForm>
</template>

Кастомное действие

Создать пользователя

<SButton @click="createUser">Создать пользователя</SButton>

<template>
    <SButton @click="createUser">Создать пользователя</SButton>
</template>
<script setup>
import { SAlert } from 'startup-ui'
function createUser() {
    SAlert.success('Пользователь создан')
}
</script>

Переход по ссылке

Если добавляем href, то кнопка по умолчанию становится семантически правильным анкором:

Документация

<SButton href="https://startup-ui.ru">Документация</SButton>

<template>
    <SButton href="https://startup-ui.ru">Документация</SButton>
</template>

<script setup>
import { SButton } from 'startup-ui'
</script>

Переход по внутренней ссылке InertiaJs

Если нужно сделать кнопку внутренней InertjaJS-ссылкой, то используем атрибут "is":

<SButton :is="Link" href="/projects/create">Создать проект</SButton>

Интерфейс компонента

Свойства (Props)

Название	Тип	По умолчанию	Описание
outlined	boolean	false	Стиль кнопки с контуром (без заливки)
transparent	boolean	false	Прозрачная кнопка без границ
fullwidth	boolean	false	Кнопка на всю ширину контейнера
small	boolean	false	Маленький размер кнопки
disabled	boolean	false	Отключает кнопку (некликабельна, прозрачность 0.3)
loading	boolean	false	Состояние загрузки (некликабельна, курсор ожидания)
color	string	—	Цвет кнопки: "red", "green", "yellow", "gold" или кастомный
is	string | Component	—	HTML-элемент или Vue-компонент для рендеринга (например, InertiaJS Link)
href	string	—	URL для перехода (делает кнопку ссылкой)

Слоты (Slots)

Название	Описание
default	Содержимое кнопки (текст, иконка и т.д.)