logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.9.2
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • 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
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
Locale text
Placement
Conditional trigger
Customize icon
Asynchronously close
Asynchronously close on Promise
API
Design Token
Note

Popconfirm

  • NotificationProgress

    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
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    A simple and compact confirmation dialog of an action.

    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

    Component TokenHow to use?

    Token NameDescriptionTypeDefault Value
    zIndexPopupz-index of Popconfirmnumber1060

    Global TokenHow to use?

    Note

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

    Basic

    The basic example supports the title and description props of confirmation.

    description is supported in version 5.1.0.

    expand codeexpand code
    Placement

    There are 12 placement options available. Use arrow: { pointAtCenter: true } if you want the arrow to point at the center of target.

    expand codeexpand code
    Customize icon

    Set icon props to customize the icon.

    expand codeexpand code
    Asynchronously close on Promise

    Asynchronously close a popconfirm when the OK button is pressed. For example, you can use this pattern when you submit a form.

    expand codeexpand code
    Locale text

    Set okText and cancelText props to customize the button's labels.

    expand codeexpand code
    Conditional trigger

    Make it pop up under some conditions.

    expand codeexpand code
    Asynchronously close

    Asynchronously close a popconfirm when a the OK button is pressed. For example, you can use this pattern when you submit a form.

    expand codeexpand code


    Whether directly execute: