### Popover Confirmation

```jsx
import { PopConfirm, Button } from 'frontend-react-components';


<PopConfirm
    id="pop-confirm-id"
    message="Helpful text"
    overlayClassName="pop-content"
    cancelLabel="Cancel"
    confirmLabel="Confirm"
    onCancel={ () => {} }
    onConfirm={ () => {} }
>
    <Button size="sm">Click here</Button>
</PopConfirm>
```

### Popover Confirmation with error
```jsx
import { PopConfirm, Button } from 'frontend-react-components';

<PopConfirm
    id="pop-confirm-id"
    message="Helpful text"
    overlayClassName="pop-content"
    cancelLabel="Cancel"
    confirmLabel="Confirm"
    onCancel={ () => {} }
    onConfirm={ () => {} }
    hasError={ true }
    errorMessage="Something terrible has occurred"
>
    <Button size="sm">Click here for an error</Button>
</PopConfirm>
```

### Popover Confirmation with loading button
```jsx
import { PopConfirm, Button } from 'frontend-react-components';

<PopConfirm
    id="pop-confirm-id"
    message="Helpful text"
    overlayClassName="pop-content"
    cancelLabel="Cancel"
    confirmLabel="Confirm"
    onCancel={ () => {} }
    onConfirm={ () => {} }
    confirmButtonType="loading"
    isLoading={ true }
>
    <Button size="sm">Click here for loading</Button>
</PopConfirm>
```

### Popover Confirmation with managed show
```jsx
import { useState } from 'react';
import { PopConfirm, Button } from 'frontend-react-components';

const [show, setShow] = useState(false);

<PopConfirm
    id="pop-confirm-id"
    message="Helpful text"
    overlayClassName="pop-content"
    cancelLabel="Cancel"
    confirmLabel="Confirm"
    onCancel={ () => setShow(false) }
    onConfirm={ () => setShow(false) }
    show={ show }
>
    <Button
        size="sm"
        onClick={ () => setShow(true) }
    >
        I'm managed
    </Button>
</PopConfirm>
```