ConfirmIconButton

confirm-icon-button.tsx

import React, {useCallback} from 'react';
import {
    Popover,
    PopoverTrigger,
    PopoverContent,
    PopoverHeader,
    PopoverBody,
    PopoverFooter,
    PopoverArrow,
    PopoverCloseButton,
    IconButton,
    IconButtonProps,
    ButtonGroup,
    Button,
    Portal,
    useBoolean,
} from '@chakra-ui/react';

export const ConfirmIconButton = ({onClick, ...props}: IconButtonProps) => {
    const [flag, {off, toggle}] = useBoolean();

    const handleOkClick = useCallback(
        (e) => {
            off();
            if (onClick) {
                onClick(e);
            }
        },
        [off, onClick]
    );

    return (
        <Popover isLazy isOpen={flag} onClose={off}>
            <PopoverTrigger>
                <IconButton onClick={toggle} {...props} />
            </PopoverTrigger>
            <Portal>
                <PopoverContent>
                    <PopoverArrow />
                    <PopoverHeader fontWeight="semibold">
                        Bestätigung
                    </PopoverHeader>
                    <PopoverCloseButton />
                    <PopoverBody>
                        Bist Du sicher, dass Du mit der Aktion fortfahren
                        willst?
                    </PopoverBody>
                    <PopoverFooter d="flex" justifyContent="flex-end">
                        <ButtonGroup size="sm">
                            <Button variant="ghost" onClick={off}>
                                Abbrechen
                            </Button>
                            <Button colorScheme="blue" onClick={handleOkClick}>
                                Ja
                            </Button>
                        </ButtonGroup>
                    </PopoverFooter>
                </PopoverContent>
            </Portal>
        </Popover>
    );
};

Example usage:

<ConfirmIconButton
    icon={<HiCheckCircle fontSize="1.25rem" />}
    variant="ghost"
    onClick={doSomethingVeryImportant}
    aria-label="Anfrage bestätigen"
/>