Buttons
Full Width Button
Кнопка во всю ширину колонки с двумя раскладками: подпись по центру для коротких строк и разнесённая пара «подпись с уточнением — стрелка».
- button
- full-width
- form
- cta
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/button-040
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «button-040» (Full Width Button) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/button-040.json
Registry item: https://vibeui.ru/r/button-040.json
Ставится в: components/vibeui/button-040.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Кнопка во всю ширину колонки с двумя раскладками: подпись по центру для коротких строк и разнесённая пара «подпись с уточнением — стрелка».
Кнопка на всю ширину колонки, у которой есть что положить в середину: под подписью идёт вторая строка с условием, а справа — стрелка. Для коротких подписей раскладка переключается на центрированную, и стрелка убирается из разметки. Ноль зависимостей, один файл.
## 3. Как использовать
import { Button040 } from "@/components/vibeui/button-040"
<Button040 align="between" hint="Бесплатно 14 дней, карта не нужна" onClick={subscribe}>
Оформить подписку
</Button040>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- width:100% с ограничением max-width: ширина должна приходить от колонки, а не от окна
- вторую строку hint меньшим кеглем и с пониженной непрозрачностью — она уточняет, а не спорит с подписью
- tabular-nums во второй строке: цены и сроки не должны прыгать по ширине
- две раскладки как разные случаи, а не как декор: у центрированной нет стрелки, и это осознанно
- уезжающую вперёд стрелку и лёгкое сжатие на :active — обратная связь на широкой кнопке особенно нужна
- минимальную высоту 3.25rem: узкая кнопка во всю ширину читается как полоса, а не как действие
## 6. Можно менять
- подпись кнопки и вторую строку — проп hint
- раскладку — проп align (center или between)
- акцентный цвет — проп accent
- обработчик onClick и остальные нативные пропсы button
- предельную ширину через className
## 7. Правила
- Не убирай max-width: на широком экране кнопка во всю ширину контейнера выглядит как баннер.
- Не клади во вторую строку важное условие целиком — она набрана мелко и с пониженным контрастом.
- Для раскладки between всегда оставляй стрелку: без неё правый край пустеет.
- Не выноси CSS-переменные в globals.css: компонент должен оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/button-040.jsonhttps://vibeui.ru/r/button-040.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-040-*. Серверный компонент, корень — сам <button> с width:100% и max-width, поэтому ширину задаёт родитель, а не вьюпорт. Раскладка переключается data-атрибутом align: center центрирует содержимое, between разносит текстовый блок и стрелку. Вторая строка hint набрана tabular-nums — в ней обычно цена или срок.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Button040Props = ComponentPropsWithoutRef<"button"> & {
/** Вторая строка под подписью: условие, срок, цена. */
hint?: string
/** Раскладка: подпись по центру или подпись слева, стрелка справа. */
align?: "center" | "between"
accent?: string
}
// Идея компонента: кнопка во всю ширину колонки. Проблема таких кнопок —
// пустота посередине, поэтому здесь две раскладки: центрированная для
// коротких подписей и разнесённая, где подпись с уточнением прижата влево,
// а стрелка — вправо. Ширину задаёт родитель, кнопка её только занимает.
const STYLES = `
:where([data-vibeui-block="button-040"]){
--vibeui-button-040-accent:oklch(0.48 0.15 258);
--vibeui-button-040-fg:oklch(0.99 0.01 258);
--vibeui-button-040-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="button-040"]{
appearance:none;border:0;cursor:pointer;box-sizing:border-box;
display:flex;align-items:center;gap:0.75rem;
width:100%;max-width:26rem;min-height:3.25rem;
padding:0.625rem 1.125rem;border-radius:0.875rem;
background:var(--vibeui-button-040-accent);color:var(--vibeui-button-040-fg);
font-family:var(--vibeui-button-040-font);font-size:0.9375rem;font-weight:650;line-height:1.25;
text-align:left;
transition:filter .16s ease,transform .12s ease;
}
[data-vibeui-block="button-040"][data-align="center"]{justify-content:center;text-align:center}
[data-vibeui-block="button-040"][data-align="between"]{justify-content:space-between}
[data-vibeui-block="button-040"]:hover:not(:disabled){filter:brightness(1.07)}
[data-vibeui-block="button-040"]:active:not(:disabled){transform:scale(.995)}
[data-vibeui-block="button-040"]:focus-visible{outline:2px solid var(--vibeui-button-040-accent);outline-offset:3px}
[data-vibeui-block="button-040"]:disabled{cursor:not-allowed;opacity:.55}
[data-vibeui-block="button-040"] [data-part="text"]{display:flex;flex-direction:column;gap:0.1875rem;min-width:0}
[data-vibeui-block="button-040"] [data-part="hint"]{
font-size:0.75rem;font-weight:500;opacity:.78;
font-variant-numeric:tabular-nums;
}
[data-vibeui-block="button-040"] [data-part="arrow"]{position:relative;flex:none;width:1rem;height:1rem}
[data-vibeui-block="button-040"] [data-part="arrow"]::before{
content:"";position:absolute;left:0;top:50%;width:0.875rem;height:1.75px;
margin-top:-0.875px;background:currentColor;border-radius:1px;
}
[data-vibeui-block="button-040"] [data-part="arrow"]::after{
content:"";position:absolute;right:0.125rem;top:50%;width:0.4375rem;height:0.4375rem;
box-sizing:border-box;border:1.75px solid currentColor;border-left:0;border-bottom:0;
transform:translateY(-50%) rotate(45deg);
}
[data-vibeui-block="button-040"] [data-part="arrow"]{transition:transform .18s cubic-bezier(0.16,1,0.3,1)}
[data-vibeui-block="button-040"]:hover:not(:disabled) [data-part="arrow"]{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-040"] *{animation:none!important;transition:none!important}}
`
/**
* Кнопка во всю ширину колонки с двумя раскладками и второй строкой.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Button040({
hint = "Бесплатно 14 дней, карта не нужна",
align = "between",
accent,
type = "button",
className,
style,
children = "Оформить подписку",
...props
}: Button040Props) {
const palette = {
...(accent ? { "--vibeui-button-040-accent": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-button-040" precedence="medium">
{STYLES}
</style>
<button
{...props}
type={type}
data-vibeui-block="button-040"
data-align={align}
className={className}
style={palette}
>
<span data-part="text">
<span data-part="label">{children}</span>
{hint ? <span data-part="hint">{hint}</span> : null}
</span>
{align === "between" ? (
<span data-part="arrow" aria-hidden="true" />
) : null}
</button>
</>
)
}