Buttons
Quiet Secondary Button
Тихое второстепенное действие: без рамки и фона в покое, подложка проявляется только на наведении и фокусе. Самодостаточна: один файл, без зависимостей.
- button
- secondary
- ghost
- quiet
- toolbar
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «button-004» (Quiet Secondary Button) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Команда установки недоступна: URL реестра VibeUI не сконфигурирован.
Ставится в: components/vibeui/button-004.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Тихое второстепенное действие: без рамки и фона в покое, подложка проявляется только на наведении и фокусе. Самодостаточна: один файл, без зависимостей.
Кнопка минимального веса: в покое ни рамки, ни фона — только подпись и маленькая точка-маркер слева. На наведении и фокусе появляется мягкая нейтральная подложка, текст темнеет, точка подрастает. Нейтральная палитра без акцента: кнопка намеренно не конкурирует с главным действием.
## 3. Как использовать
import { Button004 } from "@/components/vibeui/button-004"
<Button004 onClick={cancel}>Отменить</Button004>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- отсутствие рамки и фона в покое — это и есть идея компонента
- нейтральную палитру без акцентного цвета: подсветка появляется только на взаимодействии
- точку-маркер и её рост на наведении
- подложку на focus-visible, а не только на hover: с клавиатуры кнопку тоже должно быть видно
- меньшие метрики, чем у основных кнопок набора: высота 2.25rem
## 6. Можно менять
- подпись кнопки
- обработчик onClick
- показ точки — проп marker
- цвет точки — проп tint
- внешние отступы через className
## 7. Правила
- Не добавляй ей рамку или заливку в покое: тогда она перестанет быть тихой и начнёт спорить с основной кнопкой.
- Не используй как единственное действие на экране — она рассчитана на пару с основной кнопкой.
- Не выноси CSS-переменные в globals.css: компонент должен оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
Команда установки недоступна: переменная окруженияREGISTRY_BASE_URL
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-004-*. Точка-маркер отключается пропом marker, если кнопка стоит в плотном ряду. Цвет маркера меняется пропом tint.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Button004Props = ComponentPropsWithoutRef<"button"> & {
/** Точка-маркер слева. Отключается, если кнопка стоит в плотном ряду. */
marker?: boolean
tint?: string
}
// Идея компонента: минимальный вес в покое. Ни рамки, ни фона — только текст
// и маленькая точка-маркер. Подложка проявляется на наведении и фокусе,
// поэтому кнопка не конкурирует с главным действием на экране.
const STYLES = `
:where([data-vibeui-block="button-004"]){
--vibeui-button-004-fg:oklch(0.45 0.012 265);
--vibeui-button-004-fg-strong:oklch(0.27 0.016 265);
--vibeui-button-004-wash:oklch(0.55 0.02 265 / 10%);
--vibeui-button-004-marker:oklch(0.63 0.017 265);
--vibeui-button-004-ring:oklch(0.55 0.02 265 / 60%);
--vibeui-button-004-radius:0.5rem;
--vibeui-button-004-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="button-004"]{
appearance:none;border:0;background:transparent;cursor:pointer;
display:inline-flex;align-items:center;gap:0.5rem;
height:2.25rem;padding:0 0.75rem;border-radius:var(--vibeui-button-004-radius);
font-family:var(--vibeui-button-004-font);font-size:0.875rem;font-weight:500;line-height:1;
color:var(--vibeui-button-004-fg);
transition:background-color .16s ease,color .16s ease;
}
[data-vibeui-block="button-004"] [data-part="marker"]{
width:0.375rem;height:0.375rem;flex:none;border-radius:9999px;
background:var(--vibeui-button-004-marker);opacity:.7;
transition:opacity .16s ease,transform .16s ease;
}
[data-vibeui-block="button-004"]:hover:not(:disabled){background:var(--vibeui-button-004-wash);color:var(--vibeui-button-004-fg-strong)}
[data-vibeui-block="button-004"]:hover:not(:disabled) [data-part="marker"]{opacity:1;transform:scale(1.25)}
[data-vibeui-block="button-004"]:focus-visible{outline:2px solid var(--vibeui-button-004-ring);outline-offset:2px;background:var(--vibeui-button-004-wash)}
[data-vibeui-block="button-004"]:disabled{cursor:not-allowed;opacity:.5}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-004"] *{animation:none!important;transition:none!important}}
`
/**
* Тихое второстепенное действие: без рамки и фона в покое. Один файл,
* ноль зависимостей, собственная палитра.
*/
export function Button004({
marker = true,
tint,
type = "button",
className,
style,
children = "Отменить",
...props
}: Button004Props) {
const palette = {
...(tint ? { "--vibeui-button-004-marker": tint } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-button-004" precedence="medium">
{STYLES}
</style>
<button
{...props}
type={type}
data-vibeui-block="button-004"
className={className}
style={palette}
>
{marker ? <span data-part="marker" aria-hidden="true" /> : null}
{children}
</button>
</>
)
}