Buttons
Minimal Link Button
Самое лёгкое действие набора: текст со стрелкой, подчёркивание прочерчивается слева направо на наведении. Самодостаточна: один файл, без зависимостей.
- button
- link
- minimal
- inline
- text
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «button-011» (Minimal Link Button) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Команда установки недоступна: URL реестра VibeUI не сконфигурирован.
Ставится в: components/vibeui/button-011.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Самое лёгкое действие набора: текст со стрелкой, подчёркивание прочерчивается слева направо на наведении. Самодостаточна: один файл, без зависимостей.
Текстовое действие без фона, рамки и фиксированной высоты — встаёт прямо в строку. В покое подчёркивания нет: тонкая линия прочерчивается слева направо на наведении и фокусе, цвет уходит в акцентный, стрелка уезжает вперёд. Самый лёгкий элемент набора.
## 3. Как использовать
import { Button011 } from "@/components/vibeui/button-011"
<Button011 onClick={openFeatures}>Смотреть все возможности</Button011>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- отсутствие фона, рамки и фиксированной высоты — компонент должен вставать в строку текста
- прочерчивание подчёркивания через scaleX с transform-origin слева, а не постоянную линию
- появление подчёркивания и на focus-visible, а не только на hover
- уезжающую вперёд стрелку
- нулевые padding: любые отступы задаются снаружи через className
## 6. Можно менять
- подпись кнопки
- показ стрелки — проп arrow
- акцентный цвет — проп accent
- обработчик onClick
- внешние отступы через className
## 7. Правила
- Не заменяй <button> на <a>. Если нужен переход по адресу — используй обычную ссылку или компонент роутера, а не эту кнопку.
- Не добавляй ей фон или рамку: тогда она перестанет отличаться от остальных кнопок набора.
- Не выноси CSS-переменные в globals.css: компонент должен оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
Команда установки недоступна: переменная окруженияREGISTRY_BASE_URL
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-011-*. Это button, а не ссылка: у неё нет фона, рамки и фиксированной высоты, поэтому она встаёт прямо в строку текста. Для перехода по адресу используйте обычный <a>.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Button011Props = ComponentPropsWithoutRef<"button"> & {
arrow?: boolean
accent?: string
}
// Идея компонента: самое лёгкое действие в наборе — текст со стрелкой.
// Подчёркивание не нарисовано постоянно: оно прочерчивается слева направо
// на наведении и фокусе, стрелка в это время уезжает вперёд. Ни фона,
// ни рамки, ни высоты — кнопка живёт внутри строки текста.
const STYLES = `
:where([data-vibeui-block="button-011"]){
--vibeui-button-011-fg:oklch(0.35 0.015 265);
--vibeui-button-011-accent:oklch(0.55 0.16 258);
--vibeui-button-011-ring:color-mix(in oklab, var(--vibeui-button-011-accent) 65%, transparent);
--vibeui-button-011-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="button-011"]{
position:relative;appearance:none;border:0;background:transparent;padding:0;cursor:pointer;
display:inline-flex;align-items:center;gap:0.375rem;
font-family:var(--vibeui-button-011-font);font-size:0.9375rem;font-weight:500;line-height:1.4;
color:var(--vibeui-button-011-fg);
transition:color .18s ease;
}
[data-vibeui-block="button-011"]::after{
content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
background:currentColor;transform:scaleX(0);transform-origin:left center;
transition:transform .28s cubic-bezier(0.16,1,0.3,1);
}
[data-vibeui-block="button-011"]:hover:not(:disabled),[data-vibeui-block="button-011"]:focus-visible{color:var(--vibeui-button-011-accent)}
[data-vibeui-block="button-011"]:hover:not(:disabled)::after,[data-vibeui-block="button-011"]:focus-visible::after{transform:scaleX(1)}
[data-vibeui-block="button-011"]:focus-visible{outline:2px solid var(--vibeui-button-011-ring);outline-offset:3px;border-radius:2px}
[data-vibeui-block="button-011"]:disabled{cursor:not-allowed;opacity:.5}
[data-vibeui-block="button-011"] svg{width:0.75rem;height:0.75rem;flex:none;transition:transform .28s cubic-bezier(0.16,1,0.3,1)}
[data-vibeui-block="button-011"]:hover:not(:disabled) svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-011"],[data-vibeui-block="button-011"]::after,[data-vibeui-block="button-011"] svg{transition:none!important}}
`
/**
* Минимальное текстовое действие: подчёркивание прочерчивается на наведении.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Button011({
arrow = true,
accent,
type = "button",
className,
style,
children = "Смотреть все возможности",
...props
}: Button011Props) {
const palette = {
...(accent ? { "--vibeui-button-011-accent": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-button-011" precedence="medium">
{STYLES}
</style>
<button
{...props}
type={type}
data-vibeui-block="button-011"
className={className}
style={palette}
>
{children}
{arrow ? (
<svg viewBox="0 0 12 10" fill="none" aria-hidden="true">
<path
d="M1 5h9M6.5 1.5 10 5l-3.5 3.5"
stroke="currentColor"
strokeWidth="1.6"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
) : null}
</button>
</>
)
}