VibeUI

Feedback

Confirm Popover

Confirmation right at the button instead of a full-screen modal: the question names the consequence and cancel comes first.

  • popover
  • confirm
  • danger
  • inline

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/popover-003?lang=en

Удалить «Архив 2024»?

Вместе с папкой удалятся 128 файлов. Восстановить их можно 30 дней в корзине.

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "popover-003" (Confirm Popover) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/popover-003.json

Registry item: https://vibeui.ru/r/popover-003.json
Installs to: components/vibeui/popover-003.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
Confirmation right at the button instead of a full-screen modal: the question names the consequence and cancel comes first.

A confirmation popover next to the button: the consequence is a number, cancel comes first. Zero dependencies, one file, the browser owns the state.

## 3. How to use it
import { Popover003 } from "@/components/vibeui/popover-003"

<Popover003
  label="Delete folder"
  title="Delete «Archive 2024»?"
  confirmLabel="Delete"
  cancelLabel="Cancel"
/>

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-popover-003-* palette — do not swap it for your theme tokens
- the panel layout only inside the :popover-open rule — display in the plain rule overrides the browser's display:none and the panel stays open forever
- the button order «cancel, then confirm»: a stray Enter must not delete data
- the named consequence instead of "are you sure?" — a file count helps decide, a question does not
- closing both buttons through popovertargetaction: the panel must not linger after the action
- the panel's own light surface: without it the dark text disappears on a dark background

## 6. You may change
- the trigger caption through label, the question through title and the consequence through text
- the captions through confirmLabel and cancelLabel
- the danger tone through the --vibeui-popover-003-danger variable
- the panel width through width in the panel rule

## 7. Rules
- The component deletes nothing: onConfirm is called by the caller.
- An irreversible action is better confirmed by a dialog asking for the name, not a popover.
- An outside click closes the panel — that equals cancel, and it should.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

npx shadcn@latest add https://vibeui.ru/r/popover-003.json
https://vibeui.ru/r/popover-003.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-popover-003-*. Серверный: панель на HTML popover, идентификаторы разводит useId. Раскладка объявлена только в :popover-open — display в обычном правиле сломал бы закрытие. Панель центрируется относительно кнопки через left:anchor(center) и translate, под @supports not есть откат. Обе кнопки закрывают панель штатным popovertargetaction, подтверждение дополнительно вызывает onConfirm.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

import { useId } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Popover003Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children" | "title"
> & {
  label?: string
  title?: string
  /** Что именно произойдёт: «удалим 12 файлов», а не «вы уверены?». */
  text?: string
  confirmLabel?: string
  cancelLabel?: string
  onConfirm?: () => void
}

// Идея компонента: подтверждение у самой кнопки, а не модальным окном на весь
// экран. Вопрос называет последствие, а не спрашивает «уверены ли вы»;
// отмена стоит первой, потому что случайный Enter не должен удалять данные.
const STYLES = `
:where([data-vibeui-block="popover-003"]){
--vibeui-popover-003-bg:oklch(1 0 0);
--vibeui-popover-003-fg:oklch(0.23 0.014 265);
--vibeui-popover-003-muted:oklch(0.53 0.014 265);
--vibeui-popover-003-border:oklch(0.89 0.006 265);
--vibeui-popover-003-danger:oklch(0.55 0.2 25);
--vibeui-popover-003-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="popover-003"]{
position:relative;display:inline-block;
font-family:var(--vibeui-popover-003-font);color:var(--vibeui-popover-003-fg);
}
[data-vibeui-block="popover-003"] [data-part="trigger"]{
appearance:none;cursor:pointer;
display:inline-flex;align-items:center;gap:0.375rem;
height:2.25rem;padding:0 0.875rem;border-radius:0.625rem;
border:1px solid color-mix(in oklab,var(--vibeui-popover-003-danger) 35%,var(--vibeui-popover-003-border));
background:var(--vibeui-popover-003-bg);color:var(--vibeui-popover-003-danger);
font:inherit;font-size:0.8125rem;font-weight:650;
anchor-name:--vibeui-popover-003-anchor;
}
[data-vibeui-block="popover-003"] [data-part="trigger"]:hover{background:color-mix(in oklab,var(--vibeui-popover-003-danger) 8%,white)}
[data-vibeui-block="popover-003"] [data-part="trigger"]:focus-visible{outline:2px solid var(--vibeui-popover-003-danger);outline-offset:2px}
/* Раскладка панели только в :popover-open: display в обычном правиле
   перебил бы браузерный display:none и панель висела бы открытой. */
[data-vibeui-block="popover-003"] [data-part="panel"]{
position:fixed;margin:0;padding:0.875rem;
width:min(17.5rem,100vw - 2rem);box-sizing:border-box;
border:1px solid var(--vibeui-popover-003-border);border-radius:0.875rem;
background:var(--vibeui-popover-003-bg);color:inherit;
box-shadow:0 24px 50px -30px oklch(0.2 0.02 265 / 60%);
position-anchor:--vibeui-popover-003-anchor;
top:anchor(bottom);left:anchor(center);translate:-50% 0;margin-top:0.5rem;
}
[data-vibeui-block="popover-003"] [data-part="panel"]:popover-open{display:block}
@supports not (anchor-name: --a){
[data-vibeui-block="popover-003"] [data-part="panel"]{position:absolute;inset:auto;top:calc(100% + 0.5rem);left:0;translate:0 0}
}
[data-vibeui-block="popover-003"] [data-part="title"]{margin:0 0 0.25rem;font-size:0.875rem;font-weight:660;line-height:1.3}
[data-vibeui-block="popover-003"] [data-part="text"]{margin:0 0 0.75rem;font-size:0.8125rem;line-height:1.45;color:var(--vibeui-popover-003-muted)}
[data-vibeui-block="popover-003"] [data-part="row"]{display:flex;gap:0.5rem;justify-content:flex-end}
[data-vibeui-block="popover-003"] [data-part="cancel"],
[data-vibeui-block="popover-003"] [data-part="confirm"]{
appearance:none;cursor:pointer;
height:2rem;padding:0 0.8125rem;border-radius:0.5rem;
font:inherit;font-size:0.8125rem;font-weight:650;
}
[data-vibeui-block="popover-003"] [data-part="cancel"]{
border:1px solid var(--vibeui-popover-003-border);background:transparent;color:var(--vibeui-popover-003-fg);
}
[data-vibeui-block="popover-003"] [data-part="cancel"]:hover{background:oklch(0.96 0.004 265)}
[data-vibeui-block="popover-003"] [data-part="confirm"]{
border:0;background:var(--vibeui-popover-003-danger);color:oklch(0.99 0.01 25);
}
[data-vibeui-block="popover-003"] [data-part="cancel"]:focus-visible,
[data-vibeui-block="popover-003"] [data-part="confirm"]:focus-visible{outline:2px solid var(--vibeui-popover-003-danger);outline-offset:2px}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="popover-003"] *{animation:none!important;transition:none!important}}
`

/**
 * Поповер подтверждения у кнопки: последствие названо, отмена стоит первой.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Popover003({
  label = "Удалить папку",
  title = "Удалить «Архив 2024»?",
  text = "Вместе с папкой удалятся 128 файлов. Восстановить их можно 30 дней в корзине.",
  confirmLabel = "Удалить",
  cancelLabel = "Отмена",
  onConfirm,
  className,
  style,
  ...props
}: Popover003Props) {
  const id = useId().replace(/:/g, "")

  return (
    <>
      <style href="vibeui-popover-003" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="popover-003"
        className={className}
        style={style as CSSProperties}
      >
        <button type="button" data-part="trigger" popoverTarget={`${id}-panel`}>
          {label}
        </button>
        <div
          data-part="panel"
          id={`${id}-panel`}
          popover="auto"
          aria-label={title}
        >
          <p data-part="title">{title}</p>
          <p data-part="text">{text}</p>
          <div data-part="row">
            <button
              type="button"
              data-part="cancel"
              popoverTarget={`${id}-panel`}
              popoverTargetAction="hide"
            >
              {cancelLabel}
            </button>
            <button
              type="button"
              data-part="confirm"
              onClick={onConfirm}
              popoverTarget={`${id}-panel`}
              popoverTargetAction="hide"
            >
              {confirmLabel}
            </button>
          </div>
        </div>
      </div>
    </>
  )
}