Dialog
Dialog is a small window that can be used to present information and user interface elements in an overlay.
const [opened, setOpened] = useState(true);
return (
<div className={cn('flex', 'p-l', 'gap-m')}>
<Dialog
opened={opened}
onOpenedChanged={({ detail: { value } }) => setOpened(value)}
header={
<h3 className={cn('m-0')}>
New employee
</h3>
}
footer={
<div className={cn('flex', 'gap-m')}>
<Button onClick={() => setOpened(false)}>Cancel</Button>
<Button onClick={() => setOpened(false)} theme='primary'>Add</Button>
</div>
}>
<VerticalLayout style={{ width: '18rem', alignItems: 'stretch' }}>
<TextField label='First name' />
<TextField label='Last name' />
</VerticalLayout>
</Dialog>
<Button onClick={() => setOpened(!opened)}>Show dialog</Button>
</div>
);