logoAnt Design

⌘ K
  • 디자인
  • 개발
  • 컴포넌트
  • 블로그
  • 자료
5.21.3
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Popconfirm

Pop up a bubble confirmation box for an action.
가져오기import{ Popconfirm }from"antd";
소스components/popconfirm
문서
이 페이지 수정변경 로그

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference
Work with Us

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

A simple and compact dialog used for asking for user confirmation.

The difference with the confirm modal dialog is that it's more lightweight than the static popped full-screen confirm modal.

Examples

API

Common props ref:Common props

ParamDescriptionTypeDefault valueVersion
cancelButtonPropsThe cancel button propsButtonProps-
cancelTextThe text of the Cancel buttonstringCancel
disabledWhether show popconfirm when click its childrenNodebooleanfalse
iconCustomize icon of confirmationReactNode<ExclamationCircle />
okButtonPropsThe ok button propsButtonProps-
okTextThe text of the Confirm buttonstringOK
okTypeButton type of the Confirm buttonstringprimary
showCancelShow cancel buttonbooleantrue4.18.0
titleThe title of the confirmation boxReactNode | () => ReactNode-
descriptionThe description of the confirmation box titleReactNode | () => ReactNode-5.1.0
onCancelA callback of cancelfunction(e)-
onConfirmA callback of confirmationfunction(e)-
onPopupClickA callback of popup clickfunction(e)-5.5.0

Consult Tooltip's documentation to find more APIs.

Design Token

컴포넌트 토큰어떻게 사용하나요?

토큰 이름설명타입기본값
zIndexPopup确认框 z-indexnumber1060

글로벌 토큰어떻게 사용하나요?

FAQ

Why does the warning findDOMNode is deprecated sometimes appear in strict mode?

This is due to the implementation of rc-trigger. rc-trigger forces children to accept ref, otherwise it will fall back to findDOMNode, so children need to be native html tags. If not, you need to use React.forwardRef transparently passes ref to native html tags.

  • findDOMNode is deprecated reproduce: https://codesandbox.io/p/sandbox/finddomnode-c5hy96
  • Using forwardRef to fix: https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs

Note

Please ensure that the child node of Popconfirm accepts onMouseEnter, onMouseLeave, onFocus, onClick events.

Auto Shift
codepen icon
External Link Icon
expand codeexpand code
Basic
codepen icon
External Link Icon
expand codeexpand code
Placement
codepen icon
External Link Icon
expand codeexpand code
Conditional trigger
codepen icon
External Link Icon
expand codeexpand code
Asynchronously close
codepen icon
External Link Icon
expand codeexpand code
_InternalPanelDoNotUseOrYouWillBeFired
codepen icon
External Link Icon
expand codeexpand code
Locale text
codepen icon
External Link Icon
expand codeexpand code
Customize icon
codepen icon
External Link Icon
expand codeexpand code
Asynchronously close on Promise
codepen icon
External Link Icon
expand codeexpand code
Wireframe
codepen icon
External Link Icon
expand codeexpand code


Whether directly execute:
Are you OK?
Does this look good?
Are you OK?
Does this look good?
Are you OK?
Are you OK?
Does this look good?
Are you OK?
Are you OK?