# Dialog The `` component is an intrusive interactive component, not passive. The component is best used when there is a requirement the user be made aware of the content being shown, moving focus from the main content to the dialog content. The component also supports a modal (blocking) state where the user must interact with the content of the component in order to continue. Passive dismissal of the content is not allowed. Users of this state must add a trigger for the user to move beyond this content. Auro holds the opinions of the [Nielsen Norman Group](https://www.nngroup.com/articles/modal-nonmodal-dialog/) on dialog and modal use to be true. ## Use Cases The `` component should be used in situations where users may: * Be prompted to take an action before doing anything else or going back * Be prompted to view content with the option of closing it ## Set Up Triggering the dialog relies on functions being installed. See the following example code that is installed into this demo. ```javascript function toggleDialog(dialogID) { const dialog = document.querySelector(dialogID); if (dialog.hasAttribute('open')) { dialog.removeAttribute('open'); } else { dialog.setAttribute('open', true); } } ``` Once the JavaScript is added to the scope of the experience, the next part is adding a trigger. In this example, the button component will toggle a dialog with the ID of `#demo1`. ```javascript Open Default Dialog ``` ## The Structure The structure of the dialog itself consists of three slots. The `header`, `content` and `footer` slots. See the scaffolding example below for adding content to the component. ```javascript [header content] [body content] [footer content] ``` It should be noted that the `footer` slot is reserved for the placement of action buttons. ## Example(s) ### Basic The dialog open state is controlled via the `open` attribute, or by programmatically setting the `open` property to `true`. You can see in the example below under the "See Code" section that we are controlling our dialogs by adding and removing the `open` attribute.
Open default dialog
Default Dialog

When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See alaskaair.com/bagrules for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.

Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.

Before checking your bags, remember to:
  • Caerphilly croque monsieur fondue
  • Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings
  • Cheddar cheese and biscuits chalk and cheese
  • Camembert de normandie stinking bishop bavarian bergkase
Close
See code ```html
Open default dialog
Default Dialog

When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See alaskaair.com/bagrules for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.

Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.

Before checking your bags, remember to:
  • Caerphilly croque monsieur fondue
  • Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings
  • Cheddar cheese and biscuits chalk and cheese
  • Camembert de normandie stinking bishop bavarian bergkase
Close
``` ```js export function initBasicExample() { const buttons = [ document.querySelector("#openBasic"), document.querySelector("#closeBasic"), ]; const dialog = document.querySelector("#defaultDialog"); buttons.forEach((button) => { button.addEventListener("click", () => { if (dialog.hasAttribute("open")) { dialog.removeAttribute("open"); } else { dialog.setAttribute("open", true); } }); }); } ```