Popconfirm Publish Checklist

FreeNew

A publish button whose popconfirm lists what is missing (title, image alt text, summary) and offers Publish anyway only when there are warnings.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

noun

Guide and examples

When to use it

Use this when publishing is visible to others and quality checks exist (SEO, accessibility, required fields) but you do not want them to hard-block an editor.

Do not use it when a missing item must block publishing (disable the button and show the rule beside the field instead).

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/popconfirm-publish-checklist.json

It composes button, popconfirm, which the CLI installs for you.

Usage

import { PopconfirmPublishChecklist } from "@/components/popconfirm-publish-checklist"

<PopconfirmPublishChecklist
  noun="post"
  checks={[{ id: "alt", label: "Images have alt text", passed: false }]}
  onPublish={publish}
/>

Props

Prop	Type	Required	Description
`checks`	`PublishCheck[]`	required	-
`onPublish`	`() => void \| Promise<void>`	required	-
`noun`	`string`	optional	Name of the thing, for example "post".

Accessibility

Each check has an icon and a hidden "done" or "missing" word.
The title states the number of missing items.
Confirm wording changes to Publish anyway so the override is explicit.

Testing

The pattern ships with a Testing Library test (popconfirm-publish-checklist.test.tsx) that covers the plain question, the missing list with Publish anyway and going back.