VibeUI

Button Group

Expanding Extras

Сцепка, которая раскрывает редкие действия вправо: details выложен flex-строкой, поэтому summary остаётся ячейкой группы, а не заголовком блока.

  • buttongroup
  • details
  • progressive
  • toolbar

Превью

1440pxHost theme

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

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

размести это в шапке: https://vibeui.ru/c/buttongroup-035

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

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

# Установка и размещение «buttongroup-035» (Expanding Extras) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/buttongroup-035.json

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

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

## 2. Что это
Сцепка, которая раскрывает редкие действия вправо: details выложен flex-строкой, поэтому summary остаётся ячейкой группы, а не заголовком блока.

Группа действий, раскрывающая редкие кнопки вправо на details/summary. Ноль зависимостей, один файл, серверный компонент.

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

<Buttongroup035
  actions={["Ответить", "Переслать"]}
  extra={["В архив", "Спам"]}
  moreLabel="Ещё"
  label="Действия над письмом"
/>

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-buttongroup-035-* и не подменять её токенами вашей темы
- display:flex на самом details: без него раскрытые кнопки уедут блоком под summary
- details/summary вместо самодельного раскрытия — состояние и клавиатура достаются от браузера
- передачу скругления от summary к последней кнопке при открытии: иначе правый край группы обрывается
- убранный маркер списка сразу тремя правилами — Safari и Chrome прячут его по-разному
- z-index при фокусе: рамка одна на контейнере, и обводка иначе окажется под ней

## 6. Можно менять
- набор основных действий через actions
- набор редких действий через extra
- подпись раскрывающей кнопки через moreLabel и имя группы через label
- цвет раскрытого состояния и обводки через accent

## 7. Правила
- details не закрывается по клику мимо: для меню это нормально, для сцепки — ожидаемо.
- Раскрытие раздвигает соседей по строке: в тесной шапке зарезервируйте место заранее.
- Кнопки без onClick: подключите свои обработчики при установке.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

npx shadcn@latest add https://vibeui.ru/r/buttongroup-035.json
https://vibeui.ru/r/buttongroup-035.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в переменных --vibeui-buttongroup-035-*. Серверный: раскрытие держит details/summary, клиентского JS нет — состояние, клавиатура и объявление «свёрнуто/развёрнуто» приходят от браузера. Приём — display:flex на самом details: тогда summary встаёт ячейкой сцепки, а раскрытые кнопки выстраиваются справа от него в общий ряд, а не блоком под ним. Маркер списка убран через list-style:none, ::marker и ::-webkit-details-marker. Пока details закрыт, скругление правого края отдаётся summary, при открытии — последней дополнительной кнопке. Стрелка поворачивается по [open].

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Buttongroup035Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children"
> & {
  actions?: string[]
  extra?: string[]
  moreLabel?: string
  label?: string
  accent?: string
}

// Идея компонента: редкие действия не уезжают в выпадающее меню, а
// раскрываются вправо, оставаясь частью той же сцепки. Раскрытие держит
// details/summary: состояние, клавиатура и объявление «свёрнуто/развёрнуто»
// достаются от браузера, JS не нужен. details выложен flex-строкой, поэтому
// summary остаётся кнопкой сцепки, а раскрытые кнопки встают справа от неё
// в общий ряд, а не блоком под ним. Стрелка на summary поворачивается по
// [open], маркер списка убран через ::marker и ::-webkit-details-marker.
const STYLES = `
:where([data-vibeui-block="buttongroup-035"]){
--vibeui-buttongroup-035-surface:oklch(1 0 0);
--vibeui-buttongroup-035-fg:oklch(0.25 0.016 265);
--vibeui-buttongroup-035-muted:oklch(0.55 0.014 265);
--vibeui-buttongroup-035-border:oklch(0.88 0.008 265);
--vibeui-buttongroup-035-accent:oklch(0.5 0.16 265);
--vibeui-buttongroup-035-radius:0.625rem;
--vibeui-buttongroup-035-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="buttongroup-035"]{
box-sizing:border-box;display:inline-flex;isolation:isolate;
border:1px solid var(--vibeui-buttongroup-035-border);
border-radius:var(--vibeui-buttongroup-035-radius);
background:var(--vibeui-buttongroup-035-surface);
font-family:var(--vibeui-buttongroup-035-font);
}
[data-vibeui-block="buttongroup-035"] *{box-sizing:border-box}
[data-vibeui-block="buttongroup-035"] button,
[data-vibeui-block="buttongroup-035"] summary{
appearance:none;cursor:pointer;font:inherit;list-style:none;
position:relative;z-index:0;
display:inline-flex;align-items:center;gap:0.375rem;
height:2.25rem;padding:0 0.8125rem;
border:0;background:transparent;
color:var(--vibeui-buttongroup-035-fg);
font-size:0.8125rem;font-weight:600;line-height:1;white-space:nowrap;
transition:background-color .16s ease,color .16s ease;
}
[data-vibeui-block="buttongroup-035"] summary::marker{content:""}
[data-vibeui-block="buttongroup-035"] summary::-webkit-details-marker{display:none}
[data-vibeui-block="buttongroup-035"] button:hover,
[data-vibeui-block="buttongroup-035"] summary:hover{background:oklch(0.965 0.005 265)}
[data-vibeui-block="buttongroup-035"] button:focus-visible,
[data-vibeui-block="buttongroup-035"] summary:focus-visible{
z-index:1;outline:2px solid var(--vibeui-buttongroup-035-accent);outline-offset:-2px;
}
[data-vibeui-block="buttongroup-035"] [data-part="base"] button + button,
[data-vibeui-block="buttongroup-035"] details,
[data-vibeui-block="buttongroup-035"] [data-part="extra"] button{
border-inline-start:1px solid var(--vibeui-buttongroup-035-border);
}
[data-vibeui-block="buttongroup-035"] [data-part="base"]{display:flex}
[data-vibeui-block="buttongroup-035"] [data-part="base"] button:first-child{
border-start-start-radius:calc(var(--vibeui-buttongroup-035-radius) - 1px);
border-end-start-radius:calc(var(--vibeui-buttongroup-035-radius) - 1px);
}
/* details выложен строкой: summary остаётся ячейкой сцепки. */
[data-vibeui-block="buttongroup-035"] details{display:flex;align-items:stretch}
[data-vibeui-block="buttongroup-035"] [data-part="extra"]{display:flex}
[data-vibeui-block="buttongroup-035"] [data-part="extra"] button:last-child{
border-start-end-radius:calc(var(--vibeui-buttongroup-035-radius) - 1px);
border-end-end-radius:calc(var(--vibeui-buttongroup-035-radius) - 1px);
}
[data-vibeui-block="buttongroup-035"] details:not([open]) summary{
border-start-end-radius:calc(var(--vibeui-buttongroup-035-radius) - 1px);
border-end-end-radius:calc(var(--vibeui-buttongroup-035-radius) - 1px);
}
[data-vibeui-block="buttongroup-035"] summary{color:var(--vibeui-buttongroup-035-muted)}
[data-vibeui-block="buttongroup-035"] details[open] summary{
color:var(--vibeui-buttongroup-035-accent);background:oklch(0.97 0.02 265);
}
[data-vibeui-block="buttongroup-035"] summary svg{
width:0.875rem;height:0.875rem;
stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
transition:rotate .18s ease;
}
[data-vibeui-block="buttongroup-035"] details[open] summary svg{rotate:180deg}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="buttongroup-035"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_ACTIONS = ["Ответить", "Переслать"]
const DEFAULT_EXTRA = ["В архив", "Спам", "Напомнить"]

/**
 * Сцепка, которая раскрывает редкие действия вправо, оставаясь одной деталью.
 * Один файл, ноль зависимостей, серверный компонент на details/summary.
 */
export function Buttongroup035({
  actions = DEFAULT_ACTIONS,
  extra = DEFAULT_EXTRA,
  moreLabel = "Ещё",
  label = "Действия над письмом",
  accent,
  className,
  style,
  ...props
}: Buttongroup035Props) {
  const palette = {
    ...(accent ? { "--vibeui-buttongroup-035-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-buttongroup-035" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="buttongroup-035"
        className={className}
        style={palette}
        role="group"
        aria-label={label}
      >
        <div data-part="base">
          {actions.map((action) => (
            <button key={action} type="button">
              {action}
            </button>
          ))}
        </div>
        <details>
          <summary>
            {moreLabel}
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <path d="m6 9 6 6 6-6" />
            </svg>
          </summary>
          <div data-part="extra">
            {extra.map((action) => (
              <button key={action} type="button">
                {action}
              </button>
            ))}
          </div>
        </details>
      </div>
    </>
  )
}