VibeUI

Buttons

Social Proof Button

CTA с социальным доказательством внутри: стопка аватаров из инициалов и тихий счётчик рядом с подписью. Самодостаточна: один файл, без зависимостей.

  • button
  • cta
  • social-proof
  • avatars
  • signup

Превью

1440pxHost theme

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

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

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

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

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

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

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

## 2. Что это
CTA с социальным доказательством внутри: стопка аватаров из инициалов и тихий счётчик рядом с подписью. Самодостаточна: один файл, без зависимостей.

Тёмная кнопка-пилюля с социальным доказательством внутри. Слева — стопка перекрывающихся круглых аватаров из инициалов, дальше подпись, за ней тихая строка со счётчиком. На наведении стопка раскрывается: аватары немного разъезжаются. Аватары нарисованы CSS, картинок и запросов нет.

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

<Button007 people={["АК", "МД", "ЛП"]} hint="+2 400 команд" onClick={signUp}>
  Присоединиться
</Button007>

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

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

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

## 5. Сохранить как установлено
- аватары из инициалов на CSS — не заменять на <img>, это добавит запросы и сломает автономность компонента
- перекрытие аватаров отрицательным margin и обводку цветом фона кнопки: без неё стопка сливается
- разъезд стопки на наведении
- разные оттенки у первых трёх аватаров: одинаковые читаются как один блок
- тихую строку счётчика меньшим кеглем и приглушённым цветом — она не должна спорить с подписью
- aria-hidden на стопке: для скринридера это украшение, а не содержание

## 6. Можно менять
- подпись кнопки
- инициалы — проп people
- текст счётчика — проп hint
- цвет аватаров — проп accent
- обработчик onClick
- внешние отступы через className

## 7. Правила
- Не подставляй в people реальные имена пользователей без их согласия — это витринный элемент.
- Не увеличивай стопку сверх четырёх аватаров: дальше она перестаёт читаться в размере кнопки.
- Не выноси CSS-переменные в globals.css: компонент должен оставаться одним файлом.

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

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

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

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-007-*. Аватары рисуются CSS из инициалов: ни картинок, ни сетевых запросов. Первые три аватара получают разные оттенки автоматически.

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Button007Props = ComponentPropsWithoutRef<"button"> & {
  /** Инициалы для стопки аватаров. Картинок нет намеренно: ноль запросов. */
  people?: string[]
  hint?: string
  accent?: string
}

// Идея компонента: социальное доказательство внутри самой кнопки. Слева —
// стопка перекрывающихся аватаров из инициалов, справа от подписи — тихая
// строка с количеством. Аватары нарисованы CSS, поэтому нет ни картинок,
// ни сетевых запросов, ни зависимостей.
const STYLES = `
:where([data-vibeui-block="button-007"]){
--vibeui-button-007-bg:oklch(0.22 0.014 265);
--vibeui-button-007-fg:oklch(0.98 0.003 265);
--vibeui-button-007-hint:oklch(0.72 0.012 265);
--vibeui-button-007-avatar:oklch(0.62 0.13 250);
--vibeui-button-007-avatar-fg:oklch(0.99 0.004 250);
--vibeui-button-007-ring:oklch(0.72 0.012 265);
--vibeui-button-007-radius:9999px;
--vibeui-button-007-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="button-007"]{
appearance:none;cursor:pointer;border:0;
display:inline-flex;align-items:center;gap:0.625rem;
height:2.75rem;padding:0 1.125rem 0 0.5rem;border-radius:var(--vibeui-button-007-radius);
font-family:var(--vibeui-button-007-font);font-size:0.875rem;font-weight:500;line-height:1;
background:var(--vibeui-button-007-bg);color:var(--vibeui-button-007-fg);
transition:background-color .18s ease;
}
[data-vibeui-block="button-007"] [data-part="stack"]{display:inline-flex;flex:none}
[data-vibeui-block="button-007"] [data-part="avatar"]{
width:1.75rem;height:1.75rem;border-radius:9999px;flex:none;
display:inline-flex;align-items:center;justify-content:center;
font-size:0.625rem;font-weight:600;letter-spacing:0.02em;
background:var(--vibeui-button-007-avatar);color:var(--vibeui-button-007-avatar-fg);
box-shadow:0 0 0 2px var(--vibeui-button-007-bg);
transition:transform .22s cubic-bezier(0.16,1,0.3,1);
}
[data-vibeui-block="button-007"] [data-part="avatar"]+[data-part="avatar"]{margin-left:-0.5rem}
[data-vibeui-block="button-007"] [data-part="avatar"]:nth-child(2){background:color-mix(in oklab, var(--vibeui-button-007-avatar) 70%, oklch(0.7 0.14 160))}
[data-vibeui-block="button-007"] [data-part="avatar"]:nth-child(3){background:color-mix(in oklab, var(--vibeui-button-007-avatar) 55%, oklch(0.72 0.16 40))}
[data-vibeui-block="button-007"]:hover:not(:disabled){background:color-mix(in oklab, var(--vibeui-button-007-bg) 82%, white)}
[data-vibeui-block="button-007"]:hover:not(:disabled) [data-part="avatar"]{margin-left:-0.25rem}
[data-vibeui-block="button-007"]:hover:not(:disabled) [data-part="avatar"]:first-child{margin-left:0}
[data-vibeui-block="button-007"] [data-part="hint"]{color:var(--vibeui-button-007-hint);font-size:0.8125rem;font-weight:400}
[data-vibeui-block="button-007"]:focus-visible{outline:2px solid var(--vibeui-button-007-ring);outline-offset:2px}
[data-vibeui-block="button-007"]:disabled{cursor:not-allowed;opacity:.55}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-007"] *{transition:none!important}}
`

/**
 * Кнопка с социальным доказательством: стопка аватаров и тихий счётчик.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Button007({
  people = ["АК", "МД", "ЛП"],
  hint = "+2 400 команд",
  accent,
  type = "button",
  className,
  style,
  children = "Присоединиться",
  ...props
}: Button007Props) {
  const palette = {
    ...(accent ? { "--vibeui-button-007-avatar": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-button-007" precedence="medium">
        {STYLES}
      </style>
      <button
        {...props}
        type={type}
        data-vibeui-block="button-007"
        className={className}
        style={palette}
      >
        <span data-part="stack" aria-hidden="true">
          {people.map((initials) => (
            <span data-part="avatar" key={initials}>
              {initials}
            </span>
          ))}
        </span>
        {children}
        {hint ? <span data-part="hint">{hint}</span> : null}
      </button>
    </>
  )
}