Modal
A modal is a container for showing extra information or actions that relate to the page a user is on.
Example
TgTeleportModule<tg-teleport-outlet name="modal"></tg-teleport-outlet>Behaviour
- Modals use
tg-tab-trap - When a modal is triggered the modal content is moved to the top of the DOM, and the host element and class are lost. See the guide for customising modals.
Modal design pattern
Use a modal to provide additional information, or confirm an action that is relevant to a customer’s current task.
Characteristics
Helpful
Modals help a customer by providing information or a confirmation while keeping the customer’s place in a flow.
Respectful
Modals show up when invited, they’re never an unexpected party crasher. They’re always triggered by a customer interaction, and don’t appear out of the blue.
Focused
Modals are designed to interrupt a customer and focus their attention by obscuring the page content with an overlay. When a customer may need to reference information on the page, consider using a reveal, accordion or dropdown to disclose content.
Anatomy
1 Title
The title sits in the modal header, and provides context for a customer.
2 Close button
A customer should always have the option to dismiss a modal. By default, a customer can click outside of the modal to close it. If a critical decision must be made by the customer, use the
required3 Modal content
Keep modal content concise, and avoid long forms where possible. Consider linking through to content on a separate page. When modal content extends beyond the height of the viewport, place it in a scrollable container.
Actions
Actions sit in the modal footer. See our best practice for form action layout.
4 Primary action
A modal has one primary action, with phrasing that relates to the task a customer is completing (eg. ‘Place bid’ rather than ‘Continue’).
5 Secondary action
When the secondary action is a link back to the page, (eg. ‘Cancel’ or ‘Go back’) use the transparent button styling.