zidanecomponents/ConfirmDialog
import { … } from 'zidane-ui'ui/src/components/ConfirmDialog.tsx
Components#
ConfirmDialogComponent#
Renders a short yes / no alertdialog with a title, an optional message, a Cancel button
and a confirm button. Focus starts on confirm, or on Cancel when destructive, so a stray
Enter never confirms a deletion. It draws the panel only; the host puts it on a modal
layer and resolves the answer.
function ConfirmDialog(props: ConfirmDialogProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | ConfirmDialogProps |
|
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
cancelLabel?from ConfirmOptions | string | Text of the cancel button. Defaults to the |
| className? | string | Extra classes on the dialog panel, such as the host layer's entry animation class. |
confirmLabel?from ConfirmOptions | string | Text of the confirm button. Defaults to the |
destructive?from ConfirmOptions | boolean | Danger-toned confirm button; focus starts on Cancel. |
message?from ConfirmOptions | ReactNode | Body text under the title. When set, it describes the dialog. |
| onCancel | () => void | Called when the Cancel button is pressed. |
| onConfirm | () => void | Called when the confirm button is pressed. |
| style? | CSSProperties | Inline styles on the dialog panel, merged after the component's own. |
titlefrom ConfirmOptions | string | Heading of the dialog. It names the |
| titleId? | string | The title's id, when a host layer's |
Constants#
CONFIRM_TITLE_IDConstantDeprecated#
Deprecated. Titles get a unique id (two dialogs can be open at once).
A host layer that is still labelled by this id passes it back as titleId.
The fixed id that earlier versions gave the dialog title.
const CONFIRM_TITLE_ID = 'zg-confirm-title'Interfaces#
ConfirmDialogPropsInterface#
Props for ConfirmDialog: ConfirmOptions plus the callbacks.
interface ConfirmDialogProps extends ConfirmOptionsProperties
| Name | Type | Description |
|---|---|---|
cancelLabel?from ConfirmOptions | string | Text of the cancel button. Defaults to the |
| className? | string | Extra classes on the dialog panel, such as the host layer's entry animation class. |
confirmLabel?from ConfirmOptions | string | Text of the confirm button. Defaults to the |
destructive?from ConfirmOptions | boolean | Danger-toned confirm button; focus starts on Cancel. |
message?from ConfirmOptions | ReactNode | Body text under the title. When set, it describes the dialog. |
| onCancel | () => void | Called when the Cancel button is pressed. |
| onConfirm | () => void | Called when the confirm button is pressed. |
| style? | CSSProperties | Inline styles on the dialog panel, merged after the component's own. |
titlefrom ConfirmOptions | string | Heading of the dialog. It names the |
| titleId? | string | The title's id, when a host layer's |
ConfirmOptionsInterface#
Content of a ConfirmDialog: its title, message, button labels and tone.
interface ConfirmOptionsProperties
| Name | Type | Description |
|---|---|---|
| cancelLabel? | string | Text of the cancel button. Defaults to the |
| confirmLabel? | string | Text of the confirm button. Defaults to the |
| destructive? | boolean | Danger-toned confirm button; focus starts on Cancel. |
| message? | ReactNode | Body text under the title. When set, it describes the dialog. |
| title | string | Heading of the dialog. It names the |