Buttons

Download Button

Кнопка загрузки, у которой прогресс заливает саму подложку: статус и проценты управляются снаружи. Самодостаточна: один файл, без зависимостей.

button
download
progress
status
async

Превью

1440pxHost theme

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

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

Подпись

Статус

Прогресс, %

Подпись загрузки

Подпись завершения

Акцент

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

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

# Установка и размещение «button-010» (Download Button) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Команда установки недоступна: URL реестра VibeUI не сконфигурирован.

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

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

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

Кнопка загрузки с прогрессом внутри подложки. В покое — тёмная кнопка со стрелкой вниз, которая подпрыгивает на наведении. В состоянии loading фон заливается слева направо по проценту, подпись показывает проценты моноширинными цифрами, кнопка блокируется и получает aria-busy. В состоянии done заливка становится зелёной и появляется галочка.

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

<Button010 status={status} progress={percent} onClick={startDownload}>
Скачать отчёт
</Button010>

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

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

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

## 5. Сохранить как установлено
- заливку прогресса в подложке самой кнопки, а не отдельной полосой рядом — это и есть идея компонента
- три состояния idle / loading / done и разные подписи у каждого
- блокировку и aria-busy в состоянии loading: повторный клик не должен проходить
- tabular-nums у процентов, иначе ширина кнопки прыгает на каждом шаге
- смену цвета заливки на done и галочку вместо стрелки
- transform-origin слева у заливки: прогресс растёт из левого края

## 6. Можно менять
- подписи children, loadingLabel и doneLabel
- цвет заливки — проп accent
- обработчик onClick
- внешние отступы через className
- проп status: idle, loading или done — компонент не переключает его сам
- значение progress от 0 до 100 — приходит снаружи, кнопка ничего не качает

## 7. Правила
- Компонент не качает файл сам: status и progress приходят снаружи. Не добавляй внутрь fetch и не заводи внутреннее состояние загрузки.
- Не оставляй status loading без обновления progress — иначе заливка замрёт и будет выглядеть как зависание.
- Не выноси CSS-переменные в globals.css: компонент должен оставаться одним файлом.

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

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

Команда установки недоступна: переменная окруженияREGISTRY_BASE_URL

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-010-*. Прогресс приходит пропами status и progress — компонент ничего не качает сам и не знает про сеть. В состоянии loading кнопка становится disabled и получает aria-busy.

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Button010Status = "idle" | "loading" | "done"

export type Button010Props = ComponentPropsWithoutRef<"button"> & {
  status?: Button010Status
  /** 0–100. Управляется снаружи: компонент ничего не качает сам. */
  progress?: number
  loadingLabel?: string
  doneLabel?: string
  accent?: string
}

// Идея компонента: прогресс живёт в самой подложке кнопки, а не в отдельной
// полосе рядом. Заливка растёт слева направо по ширине кнопки, подпись
// меняется по статусу, в конце появляется галочка. Прогресс приходит снаружи
// пропом — компонент не знает про сеть и ничего не качает сам.
const STYLES = `
:where([data-vibeui-block="button-010"]){
--vibeui-button-010-bg:oklch(0.24 0.014 265);
--vibeui-button-010-fg:oklch(0.98 0.003 265);
--vibeui-button-010-fill:oklch(0.55 0.14 250);
--vibeui-button-010-done:oklch(0.6 0.14 158);
--vibeui-button-010-ring:oklch(0.72 0.012 265);
--vibeui-button-010-radius:0.625rem;
--vibeui-button-010-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="button-010"]{
position:relative;overflow:hidden;isolation:isolate;appearance:none;border:0;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
height:2.5rem;padding:0 1.125rem;border-radius:var(--vibeui-button-010-radius);
font-family:var(--vibeui-button-010-font);font-size:0.875rem;font-weight:500;line-height:1;
background:var(--vibeui-button-010-bg);color:var(--vibeui-button-010-fg);
font-variant-numeric:tabular-nums;
transition:background-color .2s ease;
}
[data-vibeui-block="button-010"] [data-part="fill"]{
position:absolute;inset:0;z-index:-1;transform-origin:left center;
background:var(--vibeui-button-010-fill);
transition:transform .3s cubic-bezier(0.16,1,0.3,1),background-color .25s ease;
}
[data-vibeui-block="button-010"][data-status="done"] [data-part="fill"]{background:var(--vibeui-button-010-done)}
[data-vibeui-block="button-010"][data-status="idle"]:hover:not(:disabled){background:color-mix(in oklab, var(--vibeui-button-010-bg) 82%, white)}
[data-vibeui-block="button-010"] svg{width:0.875rem;height:0.875rem;flex:none}
[data-vibeui-block="button-010"] [data-part="arrow"]{transition:transform .22s cubic-bezier(0.16,1,0.3,1)}
[data-vibeui-block="button-010"][data-status="idle"]:hover:not(:disabled) [data-part="arrow"]{transform:translateY(2px)}
[data-vibeui-block="button-010"]:focus-visible{outline:2px solid var(--vibeui-button-010-ring);outline-offset:2px}
[data-vibeui-block="button-010"]:disabled{cursor:not-allowed;opacity:.7}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-010"] *{transition:none!important}}
`

function clampPercent(value: number): number {
  return Math.min(100, Math.max(0, value))
}

/**
 * Кнопка загрузки: прогресс заливает подложку кнопки. Один файл, ноль
 * зависимостей, собственная палитра.
 */
export function Button010({
  status = "idle",
  progress = 0,
  loadingLabel = "Загружаем…",
  doneLabel = "Готово",
  accent,
  type = "button",
  disabled,
  className,
  style,
  children = "Скачать отчёт",
  ...props
}: Button010Props) {
  const percent =
    status === "done" ? 100 : status === "loading" ? clampPercent(progress) : 0

  const palette = {
    ...(accent ? { "--vibeui-button-010-fill": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-button-010" precedence="medium">
        {STYLES}
      </style>
      <button
        {...props}
        type={type}
        data-vibeui-block="button-010"
        data-status={status}
        disabled={disabled || status === "loading"}
        aria-busy={status === "loading" || undefined}
        className={className}
        style={palette}
      >
        <span
          data-part="fill"
          aria-hidden="true"
          style={{ transform: `scaleX(${percent / 100})` }}
        />
        {status === "idle" ? (
          <svg
            data-part="arrow"
            viewBox="0 0 14 14"
            fill="none"
            aria-hidden="true"
          >
            <path
              d="M7 1v9m0 0 3.5-3.5M7 10 3.5 6.5M1.5 12.5h11"
              stroke="currentColor"
              strokeWidth="1.6"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        ) : null}
        {status === "done" ? (
          <svg viewBox="0 0 14 14" fill="none" aria-hidden="true">
            <path
              d="m2 7.5 3.5 3.5L12 3.5"
              stroke="currentColor"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        ) : null}
        {status === "loading"
          ? `${loadingLabel} ${clampPercent(progress)}%`
          : status === "done"
            ? doneLabel
            : children}
      </button>
    </>
  )
}