Alert Dialog
An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.
install | version | usage | style |
---|---|---|---|
yarn add @ciceksepeti/cui-alert-dialog | 0.1.0 | import {AlertDialog} from '@ciceksepeti/cui-alert-dialog' | import '@ciceksepeti/cui-alert-dialog/style.css' |
Content​
Provides accessible alert dialog for situations like user confirmation is needed
Examples​
Example of a default behavior of AlertDialog component. Renders as 'div' by default.
import { AlertDialog } from '@ciceksepeti/cui-alert-dialog';
import '@ciceksepeti/cui-alert-dialog/styles.css';
const Example = () => {
return (
<AlertDialog
aria-label="alert-dialog"
aria-describedby="alert-desc"
open={true}
removeScrollBar={true}
autoFocusToLast={false}
autoFocusToFirst={false}
disableFocusTrap={false}
enableRemoveScroll={true}
restoreFocusOnUnmount={true}
>
<p id="alert-desc">
Lorem incididunt ipsum in nostrud. Nisi commodo aliqua magna
exercitation exercitation dolore minim commodo adipisicing veniam
eiusmod ut aute ad. Consectetur consectetur enim nostrud duis laboris ex
fugiat consequat veniam excepteur quis. Aute veniam voluptate deserunt
commodo aliquip amet enim cillum magna proident.
</p>
<button>Confirm</button>
<button autoFocus>Focused</button>
</AlertDialog>
);
};
Props​
Alert Dialog Props​
Name | Type | Default | Required | Description |
as | string | div | - | Changes html tag of Alert Dialog component which renders to DOM |
open | boolean | false | required | Show/hide dialog component |
removeScrollBar | boolean | true | - | Removes scroll bar from UI |
autoFocusToLast | boolean | false | - | Auto focus to last element of dialog |
autoFocusToFirst | boolean | true | - | Auto focus to first element of dialog |
disableFocusTrap | boolean | false | - | Disables focus trap functionality |
enableRemoveScroll | boolean | true | - | Enables disabling scroll events when dialog is mounted |
restoreFocusOnUnmount | boolean | true | - | Restores focus to the element that had focus before the dialog was opened |
children | React.ReactNode | - | required | The element which shows content of an Alert Dialog |
Alert Dialog Events​
Name | Type | Description |
onEscapeKey | (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>) => void | Gets called when escape button is pressed |
onClickOutside | (event: React.MouseEvent<HTMLElement, MouseEvent | TouchEvent>) => void; | Gets called when outside of dialog is clicked |
Alert Dialog Accessibility​
info
Name | Type | Description |
aria-label | string | To provide an accessible name when the native HTML labeling element is not supported by the control. |
aria-describedby | string | Gives the alert dialog an accessible description by referring to the alert dialog content that describes the primary message or purpose of the alert dialog. |
Playground​
Styling​
Element Selector​
tip
Name | Type |
[data-cui-alert-dialog-content] | Element Selector |
Default Selector Values​
[data-cui-alert-dialog-content] {
width: 50vw;
padding: 1rem;
margin: 10vh auto;
background-color: white;
}