Feedback

Pill Toast

Подтверждение размером в строку: тёмная пилюля со значком, без заголовка, кнопок и крестика — реплика, а не сообщение.

toast
snackbar
compact
confirmation

Превью

1440pxHost theme

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

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

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

Ссылка скопирована

Сообщение

Тон

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

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

# Установка и размещение «toast-010» (Pill Toast) из VibeUI

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

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

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

## 2. Что это
Подтверждение размером в строку: тёмная пилюля со значком, без заголовка, кнопок и крестика — реплика, а не сообщение.

Компактная пилюля-подтверждение в одну строку: значок и текст, ничего больше. Ноль зависимостей, один файл, клиентского JS нет.

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

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-toast-010-* и не подменять её токенами вашей темы
- одну строку с многоточием: пилюля рассчитана на реплику, а не на объяснение
- отсутствие кнопок и крестика — действие в пилюле некуда поставить, она уходит сама
- role="status" с aria-live="polite": подтверждение не должно перебивать чтение
- выключение анимации у самого блока в prefers-reduced-motion, а не только у потомков
- тёмную заливку независимо от тона: цветная пилюля спорит с интерфейсом под ней

## 6. Можно менять
- текст через message и тон через tone
- значок через glyph или убрать его пустой строкой
- предельную ширину через max-width
- цвет значка через переменную --vibeui-toast-010-tone

## 7. Правила
- Компонент не исчезает сам: таймер держит вызывающий код.
- Текст длиннее строки обрезается многоточием — для двух строк возьмите карточку, а не пилюлю.
- Значок нарисован символом: своя иконка вставляется вместо содержимого glyph.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

npx shadcn@latest add https://vibeui.ru/r/toast-010.json

https://vibeui.ru/r/toast-010.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-toast-010-*. Серверный: хуков нет. Форма и вес отличают пилюлю от карточек: скругление 9999px, одна строка с многоточием, ширина по содержимому. Появление — короткий подъём с масштабом; правило prefers-reduced-motion выключает его и для самого блока, а не только для потомков. Тон меняет только цвет значка: заливка остаётся тёмной, чтобы пилюля не спорила с интерфейсом.

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Toast010Tone = "neutral" | "success" | "warning"

export type Toast010Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children"
> & {
  message?: string
  tone?: Toast010Tone
  /** Значок слева. Пустая строка убирает его. */
  glyph?: string
}

// Идея компонента: подтверждение размером в строку. Ни заголовка, ни кнопок,
// ни крестика — пилюля появляется, читается за долю секунды и уходит сама.
// Форма и вес отличают её от карточек: это реплика, а не сообщение.
const STYLES = `
:where([data-vibeui-block="toast-010"]){
--vibeui-toast-010-bg:oklch(0.21 0.014 265);
--vibeui-toast-010-fg:oklch(0.97 0.002 265);
--vibeui-toast-010-tone:oklch(0.78 0.13 152);
--vibeui-toast-010-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="toast-010"]{
display:inline-flex;align-items:center;gap:0.5rem;
max-width:22rem;box-sizing:border-box;
padding:0.5rem 0.9375rem 0.5rem 0.75rem;
border-radius:9999px;
background:var(--vibeui-toast-010-bg);color:var(--vibeui-toast-010-fg);
font-family:var(--vibeui-toast-010-font);font-size:0.8125rem;line-height:1.4;
box-shadow:0 16px 34px -20px oklch(0.15 0.02 265 / 70%);
animation:vibeui-toast-010-rise .26s cubic-bezier(.2,.8,.3,1) both;
}
[data-vibeui-block="toast-010"][data-tone="warning"]{--vibeui-toast-010-tone:oklch(0.82 0.15 85)}
[data-vibeui-block="toast-010"][data-tone="neutral"]{--vibeui-toast-010-tone:oklch(0.82 0.02 265)}
[data-vibeui-block="toast-010"] [data-part="glyph"]{
flex:none;display:flex;align-items:center;justify-content:center;
width:1.25rem;height:1.25rem;border-radius:9999px;
background:color-mix(in oklab,var(--vibeui-toast-010-tone) 24%,transparent);
color:var(--vibeui-toast-010-tone);
font-size:0.6875rem;font-weight:800;line-height:1;
}
[data-vibeui-block="toast-010"] [data-part="message"]{
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:520;
}
@keyframes vibeui-toast-010-rise{
from{opacity:0;transform:translateY(0.625rem) scale(.96)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="toast-010"] *{animation:none!important;transition:none!important}}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="toast-010"]{animation:none!important}}
`

/**
 * Компактная пилюля-подтверждение: одна строка, без кнопок и заголовка.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Toast010({
  message = "Ссылка скопирована",
  tone = "success",
  glyph = "✓",
  className,
  style,
  ...props
}: Toast010Props) {
  return (
    <>
      <style href="vibeui-toast-010" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="toast-010"
        data-tone={tone}
        role="status"
        aria-live="polite"
        className={className}
        style={style as CSSProperties}
      >
        {glyph ? (
          <span data-part="glyph" aria-hidden="true">
            {glyph}
          </span>
        ) : null}
        <span data-part="message">{message}</span>
      </div>
    </>
  )
}