Skip to main content

Dialog

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

installversionusagestyle
yarn add @ciceksepeti/cui-dialog1.0.0import {Dialog} from '@ciceksepeti/cui-dialog'import '@ciceksepeti/cui-dialog/style.css'

Content​

Shows the relevant content in a Dialog in accordance with accessibility rules. Dialog is a polymorphic component. That's why can be rendered as any valid HTML tag

Examples​

Default​

Example of a default behavior of Dialog component. Renders as 'div' by default.
Default one works as sticky dialog window there is no close option. You should refresh the page in order to clear dialog window or you can use escape.

import React, { useState } from 'react';
import { Dialog } from '@ciceksepeti/cui-dialog';
import '@ciceksepeti/cui-dialog/styles.css';

const Example = () => {
const [open, setOpen] = useState(false);

return (
<>
<button onClick={() => setOpen(true)}>show 'default' dialog</button>
<Dialog
removeScrollBar="false"
autoFocusToLast="false"
autoFocusToFirst="false"
disableFocusTrap="false"
enableRemoveScroll="false"
restoreFocusOnUnmount="true"
open={open}
>
I am a dialog
</Dialog>
</>
);
};
PREVIEW
Default Dialog

Escape​

Example of when escape is pressed, it should close dialog if onEscapeKey is provided

import React, { useState } from 'react';
import { Dialog } from '@ciceksepeti/cui-dialog';
import '@ciceksepeti/cui-dialog/styles.css';

const Example = () => {
const [open, setOpen] = useState(false);

const onEscapeKey = () => {
setOpen(false);
};
const onClickOutside = () => {
setOpen(false);
};
return (
<>
<button onClick={() => setOpen(true)}>show 'escape' dialog</button>
<Dialog
removeScrollBar="false"
autoFocusToLast="false"
autoFocusToFirst="false"
disableFocusTrap="false"
enableRemoveScroll="false"
restoreFocusOnUnmount="true"
open={open}
onEscapeKey={onEscapeKey}
onClickOutside={onClickOutside}
>
<p>I am a dialog</p>
</Dialog>
</>
);
};
PREVIEW
Escape Dialog

Trapped​

Example of rendering Focus Trapped Dialog component and large height to demonstrate scroll behavior when Dialog is open

import React, { useState } from 'react';
import { Dialog } from '@ciceksepeti/cui-dialog';
import '@ciceksepeti/cui-dialog/styles.css';

const Example = () => {
const [open, setOpen] = useState(false);

const dialogStyles = {
display: 'flex',
flexDirection: 'column',
};

return (
<div>
<button>unfocusable button1</button>
<button onClick={() => setOpen(true)}>show dialog</button>
<Dialog
removeScrollBar="true"
autoFocusToLast="false"
autoFocusToFirst="true"
disableFocusTrap="false"
enableRemoveScroll="true"
restoreFocusOnUnmount="true"
style={dialogStyles}
open={open}
>
<p>focusing with tab should not leave the dialog!</p>
<button>should be auto focused</button>
<button>second button</button>
<button onClick={() => setOpen(false)}>close button</button>
</Dialog>
</div>
);
};
PREVIEW
Trapped Dialog

Props​

Dialog Props​

Dialog Events​

Dialog Accessibility​

Playground​

/img/codesandbox-icon

Styling​

Element Selectors​

Default Selector Values​