Группа кнопок

Полоса «поделиться»

Группа шеринга, где ссылка видна прямо в сцепке отдельной ячейкой: люди отправляют её глазами раньше, чем нажимают кнопку.

Что можно поменять

  • адрес в ячейке через link
  • подпись копирования через copyLabel
  • набор целей через targets и имя группы через label

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы

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

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

добавь это на главную первым экраном:

https://vibeui.ru/c/buttongroup-040?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

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

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

Загружается…

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

Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.

Технические заметки

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в переменных --vibeui-buttongroup-040-*. Серверный: хуков нет. Ячейка ссылки получает flex:1 1 auto с min-width:0 и text-overflow:ellipsis, а кнопки — flex:none: на узкой ширине сжимается текст, а не цели нажатия. Копирование выделено мягкой заливкой и подписью, остальные цели — квадратные ячейки со значками и aria-label. Рамка одна — на контейнере, разделители рисует border-inline-start у кнопок, углы обрезает overflow:hidden. Обводка фокуса уведена внутрь через outline-offset:-2px, иначе её срежет рамка контейнера.

Теги

  • buttongroup
  • share
  • copy
  • truncate
Исходник компонента

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

Загружается…