@amsterdam/design-system-css
Version:
Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.
32 lines (21 loc) • 1.5 kB
Markdown
<!-- @license CC0-1.0 -->
# Dialog
A Dialog allows the user to focus on one task or a piece of information by popping up and blocking the page content until the modal task is completed or until the user dismisses the action.
## Guidelines
- Use dialogs sparingly because they interrupt the user’s workflow.
- Use a dialog for short and non-frequent tasks.
Consider using the main flow for regular tasks.
- Wrap multiple buttons in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs).
## Keyboard support
| key | function |
| :---------- | :--------------------------------------------------------------- |
| Tab | Moves focus to the next focusable element inside the dialog. |
| Shift + Tab | Moves focus to the previous focusable element inside the dialog. |
| Escape | Closes the dialog. |
## Closing Dialog without submit
You can close a Dialog without submitting by using `<button type="button" onClick={Dialog.close}>`.
## References
- [HTMLDialogElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement)
- [Return value](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue)
- [Modal & Nonmodal Dialogs: When (& When Not) to Use Them](https://www.nngroup.com/articles/modal-nonmodal-dialog/)
- [Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)