Buttons

Action Button

Основная кнопка действия: три размера, три тона и состояние загрузки. Самодостаточна: один файл, без зависимостей, не зависит от темы проекта.

button
action
inline
cta

Превью

1440pxHost theme

Использовать с AI

1. Скопируйте ссылку.
2. Напишите агенту своими словами и вставьте её в предложение.
3. Агент откроет ссылку и поставит компонент из registry.

Подпись

Тон

Размер

Загрузка

Акцент

Цвет подписи

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «button-001» (Action Button) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Команда установки недоступна: URL реестра VibeUI не сконфигурирован.

Ставится в: components/vibeui/button-001.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Основная кнопка действия: три размера, три тона и состояние загрузки. Самодостаточна: один файл, без зависимостей, не зависит от темы проекта.

Небольшая кнопка действия. Три размера (sm/md/lg), три тона (solid — заливка акцентом, soft — полупрозрачная подложка, outline — только рамка) и состояние loading со спиннером на чистом CSS. Есть focus-visible и disabled. Ноль зависимостей, один файл, собственная палитра.

## 3. Как использовать
import { Button001 } from "@/components/vibeui/button-001"

<Button001 tone="solid" size="md" onClick={handleSubmit}>
Get started
</Button001>

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-button-001-* — не заменять её на токены темы проекта (bg-primary, text-primary-foreground, bg-background и т.п.)
- высоты, горизонтальные паддинги и размеры шрифта у sm/md/lg — это и есть пропорции кнопки
- радиус скругления --vibeui-button-001-radius: он общий для всех размеров
- три тона как отдельные значения пропа tone — не схлопывать их в один вариант и не добавлять четвёртый
- focus-visible outline и его offset: без них кнопка недоступна с клавиатуры
- поведение loading: кнопка становится disabled и получает aria-busy, подпись при этом не подменяется спиннером
- спиннер на CSS-анимации и правило prefers-reduced-motion
- блок <style> внутри компонента — в нём вся палитра, размеры и keyframes

## 6. Можно менять
- подпись кнопки и любые дочерние узлы, включая иконку рядом с текстом
- акцентный цвет — проп accent (и accentForeground для контраста подписи)
- значения пропов size и tone под конкретное место в интерфейсе
- любые нативные пропсы button: onClick, type, form, name, disabled, aria-*
- внешние отступы и ширину через className
- состояние loading — им управляет вызывающий код, кнопка сама ничего не ждёт

## 7. Правила
- Это inline-компонент, а не секция. Не оборачивай его в дополнительный <div> ради отступа — используй className.
- Не добавляй иконочные библиотеки ради спиннера: он уже есть на CSS. Иконку рядом с текстом можно передать как children.
- Не выноси CSS-переменные в globals.css: компонент должен оставаться одним файлом.
- Не заменяй <button> на <a>. Для ссылки используй обычный <a> или компонент роутера, а не эту кнопку.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

Команда установки недоступна: переменная окруженияREGISTRY_BASE_URL

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-001-*. Акцент меняется пропом accent, размеры и тона — data-атрибутами, объявленными внутри компонента. Принимает любые пропсы нативного <button>. Спиннер на чистом CSS, иконочные библиотеки не нужны.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Button001Size = "sm" | "md" | "lg"
export type Button001Tone = "solid" | "soft" | "outline"

export type Button001Props = ComponentPropsWithoutRef<"button"> & {
  size?: Button001Size
  tone?: Button001Tone
  loading?: boolean
  accent?: string
  accentForeground?: string
}

// Компонент везде выглядит одинаково, поэтому палитра, размеры и keyframes
// живут здесь, а не в globals.css проекта. Объявление переменных обёрнуто
// в :where() — нулевая специфичность, так что inline style пропа accent
// и любой класс пользователя переопределяют значение.
//
// Правила размеров и тонов заданы селекторами по data-атрибутам, а не
// Tailwind-классами: компонент не должен зависеть от версии Tailwind
// в чужом проекте. Базовое правило имеет специфичность (0,1,0), поэтому
// утилиты вроде mt-4 или w-full из className продолжают работать.
const STYLES = `
:where([data-vibeui-block="button-001"]){
--vibeui-button-001-accent:oklch(0.62 0.187 264);
--vibeui-button-001-accent-fg:oklch(0.99 0.004 264);
--vibeui-button-001-soft-bg:color-mix(in oklab, var(--vibeui-button-001-accent) 14%, transparent);
--vibeui-button-001-soft-bg-hover:color-mix(in oklab, var(--vibeui-button-001-accent) 22%, transparent);
--vibeui-button-001-border:color-mix(in oklab, var(--vibeui-button-001-accent) 45%, transparent);
--vibeui-button-001-ring:color-mix(in oklab, var(--vibeui-button-001-accent) 70%, transparent);
--vibeui-button-001-radius:0.625rem;
--vibeui-button-001-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="button-001"]{
display:inline-flex;align-items:center;justify-content:center;gap:0.5em;
border:1px solid transparent;border-radius:var(--vibeui-button-001-radius);
font-family:var(--vibeui-button-001-font);font-weight:500;line-height:1;
text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none;
transition:background-color .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease;
}
[data-vibeui-block="button-001"]:focus-visible{outline:2px solid var(--vibeui-button-001-ring);outline-offset:2px}
[data-vibeui-block="button-001"]:disabled{cursor:not-allowed;opacity:.55}

[data-vibeui-block="button-001"][data-size="sm"]{height:2rem;padding:0 0.75rem;font-size:0.8125rem}
[data-vibeui-block="button-001"][data-size="md"]{height:2.5rem;padding:0 1.125rem;font-size:0.875rem}
[data-vibeui-block="button-001"][data-size="lg"]{height:3rem;padding:0 1.5rem;font-size:1rem}

[data-vibeui-block="button-001"][data-tone="solid"]{background:var(--vibeui-button-001-accent);color:var(--vibeui-button-001-accent-fg)}
[data-vibeui-block="button-001"][data-tone="solid"]:hover:not(:disabled){background:color-mix(in oklab, var(--vibeui-button-001-accent) 88%, black)}
[data-vibeui-block="button-001"][data-tone="soft"]{background:var(--vibeui-button-001-soft-bg);color:var(--vibeui-button-001-accent)}
[data-vibeui-block="button-001"][data-tone="soft"]:hover:not(:disabled){background:var(--vibeui-button-001-soft-bg-hover)}
[data-vibeui-block="button-001"][data-tone="outline"]{background:transparent;color:var(--vibeui-button-001-accent);border-color:var(--vibeui-button-001-border)}
[data-vibeui-block="button-001"][data-tone="outline"]:hover:not(:disabled){background:var(--vibeui-button-001-soft-bg)}

[data-vibeui-block="button-001"] [data-part="spinner"]{
width:1em;height:1em;flex:none;border-radius:9999px;
border:2px solid currentColor;border-top-color:transparent;
animation:vibeui-button-001-spin .6s linear infinite;
}
@keyframes vibeui-button-001-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-001"] *{animation:none!important;transition:none!important}}
`

/**
 * Основная кнопка действия. Один файл, ноль зависимостей, собственная
 * палитра — выглядит одинаково в любом проекте независимо от его темы.
 */
export function Button001({
  size = "md",
  tone = "solid",
  loading = false,
  accent,
  accentForeground,
  type = "button",
  disabled,
  className,
  style,
  children = "Get started",
  ...props
}: Button001Props) {
  const palette = {
    ...(accent ? { "--vibeui-button-001-accent": accent } : null),
    ...(accentForeground
      ? { "--vibeui-button-001-accent-fg": accentForeground }
      : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-button-001" precedence="medium">
        {STYLES}
      </style>
      <button
        {...props}
        type={type}
        data-vibeui-block="button-001"
        data-tone={tone}
        data-size={size}
        // Кнопка в состоянии загрузки не должна принимать повторный клик,
        // а aria-busy сообщает об этом скринридеру.
        disabled={disabled || loading}
        aria-busy={loading || undefined}
        className={className}
        style={palette}
      >
        {loading ? <span data-part="spinner" aria-hidden="true" /> : null}
        {children}
      </button>
    </>
  )
}