# Inline Dialogs

Inline dialogs are pop-up containers for small amounts of information and/or controls that are displayed when selected by a user. They are usually triggered by buttons. Inline dialogs should be used when sections within the page require additional information or actions, but are not crucial to the page as a whole. A great use for inline dialogs is feature discovery.

1. Trigger: Is a button that indicates what information the inline dialog will contain.
2. Window: This is displayed once the trigger is selected and contains all of the information required for the dialog.
3. Controls: Inline dialogs can feature control items such as buttons, checkboxes, and text fields. An action is not always required.

# Related components

2. Modals

# Behaviour

• Scrolling: For long lists inside the inline dialog, the content will scroll while the header remains fixed. If you need to display a lot of content or complex interactions, consider using a modal instead.

• Position: Inline dialogs can appear at the top, bottom, left or right of the trigger button with an additional 2 positions available for each location for fine tuning. This means that the location of the dialog can be placed in context with the content on the page.

# References:

1. 5 Essential UX Rules for Dialog Design
2. 10 guidelines to consider when using overlays / modals