'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Overlays
Popconfirm
A small confirm next to the button that asks, for quick actions.
Ant Design: Popconfirm
import { Popconfirm } from '@alea/ui';
Examples
Popconfirm
Asks next to the button.
Not only for deletes
A neutral confirmation for something reversible but noticeable.
Props
Popconfirm props
A small confirm next to its trigger, for quick, reversible-ish actions (Ant's Popconfirm).
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The button that asks. |
onConfirmrequired | () => unknown | - | Called when the person confirms. |
titlerequired | ReactNode | - | The question. |
cancelLabel | ReactNode | 'Cancel' | Default "Cancel". |
confirmLabel | ReactNode | 'Yes' | Default "Confirm". |
description | ReactNode | - | More context under the question. |
placement | "start" | "end" | "bottom" | "top" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top left" | "top right" | "top start" | "top end" | "l… | 'top' | Where it opens relative to its trigger. |
tone | "danger" | "default" | 'default' | danger turns the confirm button red. |
Accessibility
- An alertdialog in a popover; the confirm button gets focus.
Keyboard
| Key | Does |
|---|---|
| Enter or Space | Opens it |
| Tab | Moves between Cancel and Confirm |
| Escape | Closes it and returns focus |
Do and don't
Do
- Ask a direct question: Remove this swatch?
Don't
- Don't use for actions that can't be undone: use AlertDialog.