Skip to main content

Alert Dialog

Informs the user about situations that require acknowledgement.

installversionusagestyle
yarn add @ciceksepeti/cui-alert-dialog1.0.0import {AlertDialog} from '@ciceksepeti/cui-alert-dialog'import '@ciceksepeti/cui-alert-dialog/style.css'
web3consorcium
Wai-AriaW3
web3consorcium
RepositoryGitHub
web3consorcium
PackageNPM
web3consorcium
StyleSass

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>
  );
};
PREVIEW
Alert Dialog

Props​

Alert Dialog Props​

Alert Dialog Events​

Alert Dialog Accessibility​

Playground​

/img/codesandbox-icon

Styling​

Element Selector​

Default Selector Values​