Modal Dialog
Use modal dialogs to show force a selection between two options. View this component on GitHub
Contents
- Basic
- Accessibility
- Content Design
- Props
- Events
- Methods
- CSS Shadow Parts
- CSS Custom Properties
- Slots
Basic
This example shows a basic Modal Dialog.
<admiralty-modal-dialog
heading="Do you want to leave this page?"
show="true"
label="Do you want to leave this page?"
description="If you leave this page, your survey won't be saved and can't be recovered"
>
<div slot="content">
<admiralty-icon name="warning-rounded"></admiralty-icon>
<div>If you leave this page, your survey won't be saved and can't be recovered</div>
</div>
<div slot="actions">
<admiralty-button variant="secondary">Leave page</admiralty-button>
<admiralty-button>Continue survey</admiralty-button>
</div>
</admiralty-modal-dialog>
<admiralty-modal-dialog
heading="Do you want to leave this page?"
show="true"
label="Do you want to leave this page?"
description="If you leave this page, your survey won't be saved and can't be recovered"
>
<div slot="content">
<admiralty-icon name="warning-rounded"></admiralty-icon>
<div>If you leave this page, your survey won't be saved and can't be recovered</div>
</div>
<div slot="actions">
<admiralty-button variant="secondary">Leave page</admiralty-button>
<admiralty-button>Continue survey</admiralty-button>
</div>
</admiralty-modal-dialog>
<AdmiraltyModalDialog
heading="Do you want to leave this page?"
show={true}
label="Do you want to leave this page?"
description="If you leave this page, your survey won't be saved and can't be recovered">
<div slot="content">
<AdmiraltyIcon name="warning-rounded"></AdmiraltyIcon>
<div>If you leave this page, your survey won't be saved and can't be recovered</div>
</div>
<div slot="actions">
<AdmiraltyButton variant="secondary">Leave page</AdmiraltyButton>
<AdmiraltyButton>Continue survey</AdmiraltyButton>
</div>
</AdmiraltyModalDialog>
Accessibility
Use the label and description props to provide better accessibility for the modal dialog.
Content Design
When using the modal dialogue, you must: make it clear why you are displaying the modal dialogue using plain language not assume why the modal dialogue has been triggered. For example, using language like ‘Are you sure you want to leave this page?’ when the action to exit could have been accidental help users to understand what will happen next based on their next action.
Have clear and concise content and do not use: jargon like 500 or bad request ‘We are experiencing technical difficulties’ red text to warn people.
Props
descriptionstringundefinedheadingstringundefinedlabelstringundefinedshowbooleanfalseEvents
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
--admiralty-modal-dialog-content-padding--admiralty-modal-dialog-content-slotted-button-padding--admiralty-modal-dialog-content-slotted-margin-bottom--admiralty-modal-dialog-content-slotted-padding--admiralty-modal-dialog-heading-margin-bottom--admiralty-modal-dialog-heading-padding--admiralty-modal-dialog-margin--admiralty-modal-heading-font-size--admiralty-modal-heading-font-weight--admiralty-modal-slotted-icon-font-size--admiralty-modal-slotted-text-font-sizeSlots
actionscontent