Dialog

<afp-dialog>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A modal dialog overlay that displays contextual content.

Dialog

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Dialog

<afp-dialog id="dialogExample1">
  <div slot="header">Dialog</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <afp-button data-dialog="close">Close</afp-button>
  </div>
</afp-dialog>

<afp-button onclick="dialogExample1.show()">Dialog</afp-button>

<afp-dialog [id]="'dialogExample1'">
  <div slot="header">Dialog</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <afp-button [data-dialog]="'close'">Close</afp-button>
  </div>
</afp-dialog>

<afp-button [onclick]="'dialogExample1.show()'">Dialog</afp-button>

<AfpDialog id="dialogExample1">
  <div slot="header">Dialog</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <AfpButton data-dialog="close">Close</AfpButton>
  </div>
</AfpDialog>

<AfpButton onclick="dialogExample1.show()">Dialog</AfpButton>

<AfpDialog :id="'dialogExample1'">
  <div slot="header">Dialog</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <AfpButton :data-dialog="'close'">Close</AfpButton>
  </div>
</AfpDialog>

<AfpButton :onclick="'dialogExample1.show()'">Dialog</AfpButton>

Examples #

Closeable #

Use the closeable attribute to show a close button in the dialog header and allow closing by clicking the backdrop or Escape. You can also use data-dialog="close" on elements to close the dialog.

Closeable

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Closeable

<afp-dialog id="dialogExample2" closeable>
  <div slot="header">Closeable</div>
  <afp-button appearance="filled" slot="actions"><afp-icon name="gear"></afp-icon></afp-button>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <afp-button data-dialog="close">Close</afp-button>
  </div>
</afp-dialog>

<afp-button onclick="dialogExample2.show()">Closeable</afp-button>

<afp-dialog [id]="'dialogExample2'" closeable>
  <div slot="header">Closeable</div>
  <afp-button [appearance]="'filled'" [slot]="'actions'"><afp-icon [name]="'gear'"></afp-icon></afp-button>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <afp-button [data-dialog]="'close'">Close</afp-button>
  </div>
</afp-dialog>

<afp-button [onclick]="'dialogExample2.show()'">Closeable</afp-button>

<AfpDialog id="dialogExample2" closeable>
  <div slot="header">Closeable</div>
  <AfpButton appearance="filled" slot="actions"><AfpIcon name="gear"></AfpIcon></AfpButton>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <AfpButton data-dialog="close">Close</AfpButton>
  </div>
</AfpDialog>

<AfpButton onclick="dialogExample2.show()">Closeable</AfpButton>

<AfpDialog :id="'dialogExample2'" closeable>
  <div slot="header">Closeable</div>
  <AfpButton :appearance="'filled'" :slot="'actions'"><AfpIcon :name="'gear'"></AfpIcon></AfpButton>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <AfpButton :data-dialog="'close'">Close</AfpButton>
  </div>
</AfpDialog>

<AfpButton :onclick="'dialogExample2.show()'">Closeable</AfpButton>

Without Header #

Use the noHeader (noheader) attribute to create a dialog without the default header styling.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Without Header

<afp-dialog id="dialogExample3" noheader>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <afp-button data-dialog="close">Close</afp-button>
  </div>
</afp-dialog>

<afp-button onclick="dialogExample3.show()">Without Header</afp-button>

<afp-dialog [id]="'dialogExample3'" noheader>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <afp-button [data-dialog]="'close'">Close</afp-button>
  </div>
</afp-dialog>

<afp-button [onclick]="'dialogExample3.show()'">Without Header</afp-button>

<AfpDialog id="dialogExample3" noheader>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <AfpButton data-dialog="close">Close</AfpButton>
  </div>
</AfpDialog>

<AfpButton onclick="dialogExample3.show()">Without Header</AfpButton>

<AfpDialog :id="'dialogExample3'" noheader>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <AfpButton :data-dialog="'close'">Close</AfpButton>
  </div>
</AfpDialog>

<AfpButton :onclick="'dialogExample3.show()'">Without Header</AfpButton>

Use the noFooter (nofooter) attribute to create a dialog without the default footer styling.

Without Footer

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Without Footer

<afp-dialog id="dialogExample4" closeable nofooter>
  <div slot="header">Without Footer</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <afp-button data-dialog="close">Close</afp-button>
  </div>
</afp-dialog>

<afp-button onclick="dialogExample4.show()">Without Footer</afp-button>

<afp-dialog [id]="'dialogExample4'" closeable nofooter>
  <div slot="header">Without Footer</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <afp-button [data-dialog]="'close'">Close</afp-button>
  </div>
</afp-dialog>

<afp-button [onclick]="'dialogExample4.show()'">Without Footer</afp-button>

<AfpDialog id="dialogExample4" closeable nofooter>
  <div slot="header">Without Footer</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <AfpButton data-dialog="close">Close</AfpButton>
  </div>
</AfpDialog>

<AfpButton onclick="dialogExample4.show()">Without Footer</AfpButton>

<AfpDialog :id="'dialogExample4'" closeable nofooter>
  <div slot="header">Without Footer</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <AfpButton :data-dialog="'close'">Close</AfpButton>
  </div>
</AfpDialog>

<AfpButton :onclick="'dialogExample4.show()'">Without Footer</AfpButton>

Duration #

Use the duration attribute to set a custom animation duration in milliseconds. Set to 0 to disable animations.

Custom Duration

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Custom Duration

<afp-dialog id="dialogExample5" duration="0" closeable>
  <div slot="header">Custom Duration</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <afp-button data-dialog="close">Close</afp-button>
  </div>
</afp-dialog>

<afp-button onclick="dialogExample5.show()">Custom Duration</afp-button>

<afp-dialog [id]="'dialogExample5'" [duration]=0 closeable>
  <div slot="header">Custom Duration</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <afp-button [data-dialog]="'close'">Close</afp-button>
  </div>
</afp-dialog>

<afp-button [onclick]="'dialogExample5.show()'">Custom Duration</afp-button>

<AfpDialog id="dialogExample5" duration="0" closeable>
  <div slot="header">Custom Duration</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <AfpButton data-dialog="close">Close</AfpButton>
  </div>
</AfpDialog>

<AfpButton onclick="dialogExample5.show()">Custom Duration</AfpButton>

<AfpDialog :id="'dialogExample5'" :duration=0 closeable>
  <div slot="header">Custom Duration</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <div class="afp-cluster afp-gap-xs" slot="footer">
    <AfpButton :data-dialog="'close'">Close</AfpButton>
  </div>
</AfpDialog>

<AfpButton :onclick="'dialogExample5.show()'">Custom Duration</AfpButton>

Auto Close #

Use the autoClose attribute to automatically close the dialog after a specified duration in milliseconds.

Auto Close

This dialog will automatically close in 3 second(s).

Auto Close Dialog

<afp-dialog id="dialogExample6" autoClose="3000" noheader nofooter>
  <div slot="header">Auto Close</div>
  This dialog will automatically close in <strong id="countdown-seconds">3</strong> second(s).
</afp-dialog>
<afp-button onclick="openAutoCloseDialog()">Auto Close Dialog</afp-button>

<script>
  function openAutoCloseDialog() {
    const dialog = document.getElementById('dialogExample6');
    const countdownSeconds = document.getElementById('countdown-seconds');
    let seconds = 3;
    
    dialog.show();
    
    const interval = setInterval(() => {
      seconds--;
      if (seconds > 0) {
        countdownSeconds.textContent = seconds;
      } else {
        countdownSeconds.textContent = 3;
        clearInterval(interval);
      }
    }, 1000);
    
    dialog.addEventListener('afp-hide', () => {
      clearInterval(interval);
      countdownSeconds.textContent = 3;
    }, { once: true });
  }
</script>

<afp-dialog [id]="'dialogExample6'" autoClose="3000" noheader nofooter>
  <div slot="header">Auto Close</div>
  This dialog will automatically close in <strong id="countdown-seconds">3</strong> second(s).
</afp-dialog>
<afp-button [onclick]="'openAutoCloseDialog()'">Auto Close Dialog</afp-button>

<script>
  function openAutoCloseDialog() {
    const dialog = document.getElementById('dialogExample6');
    const countdownSeconds = document.getElementById('countdown-seconds');
    let seconds = 3;
    
    dialog.show();
    
    const interval = setInterval(() => {
      seconds--;
      if (seconds > 0) {
        countdownSeconds.textContent = seconds;
      } else {
        countdownSeconds.textContent = 3;
        clearInterval(interval);
      }
    }, 1000);
    
    dialog.addEventListener('afp-hide', () => {
      clearInterval(interval);
      countdownSeconds.textContent = 3;
    }, { once: true });
  }
</script>

<AfpDialog id="dialogExample6" autoClose="3000" noheader nofooter>
  <div slot="header">Auto Close</div>
  This dialog will automatically close in <strong id="countdown-seconds">3</strong> second(s).
</AfpDialog>
<AfpButton onclick="openAutoCloseDialog()">Auto Close Dialog</AfpButton>

<script>
  function openAutoCloseDialog() {
    const dialog = document.getElementById('dialogExample6');
    const countdownSeconds = document.getElementById('countdown-seconds');
    let seconds = 3;
    
    dialog.show();
    
    const interval = setInterval(() => {
      seconds--;
      if (seconds > 0) {
        countdownSeconds.textContent = seconds;
      } else {
        countdownSeconds.textContent = 3;
        clearInterval(interval);
      }
    }, 1000);
    
    dialog.addEventListener('afp-hide', () => {
      clearInterval(interval);
      countdownSeconds.textContent = 3;
    }, { once: true });
  }
</script>

<AfpDialog :id="'dialogExample6'" autoClose="3000" noheader nofooter>
  <div slot="header">Auto Close</div>
  This dialog will automatically close in <strong id="countdown-seconds">3</strong> second(s).
</AfpDialog>
<AfpButton :onclick="'openAutoCloseDialog()'">Auto Close Dialog</AfpButton>

<script>
  function openAutoCloseDialog() {
    const dialog = document.getElementById('dialogExample6');
    const countdownSeconds = document.getElementById('countdown-seconds');
    let seconds = 3;
    
    dialog.show();
    
    const interval = setInterval(() => {
      seconds--;
      if (seconds > 0) {
        countdownSeconds.textContent = seconds;
      } else {
        countdownSeconds.textContent = 3;
        clearInterval(interval);
      }
    }, 1000);
    
    dialog.addEventListener('afp-hide', () => {
      clearInterval(interval);
      countdownSeconds.textContent = 3;
    }, { once: true });
  }
</script>

Customization #

Use CSS custom properties to customize the dialog's appearance.

Customization

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Custom Dialog

<afp-dialog 
  style="--afp-dialog-width: 20rem; --afp-dialog-scale: 0.1;"
  id="dialogExample7" 
  nofooter 
  closeable
>
  <div slot="header">Customization</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</afp-dialog>

<afp-button onclick="dialogExample7.show()">Custom Dialog</afp-button>

<afp-dialog 
  [style]="'--afp-dialog-width: 20rem; --afp-dialog-scale: 0.1;'"
  [id]="'dialogExample7'" 
  nofooter 
  closeable
>
  <div slot="header">Customization</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</afp-dialog>

<afp-button [onclick]="'dialogExample7.show()'">Custom Dialog</afp-button>

<AfpDialog 
  style="--afp-dialog-width: 20rem; --afp-dialog-scale: 0.1;"
  id="dialogExample7" 
  nofooter 
  closeable
>
  <div slot="header">Customization</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</AfpDialog>

<AfpButton onclick="dialogExample7.show()">Custom Dialog</AfpButton>

<AfpDialog 
  :style="'--afp-dialog-width: 20rem; --afp-dialog-scale: 0.1;'"
  :id="'dialogExample7'" 
  nofooter 
  closeable
>
  <div slot="header">Customization</div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</AfpDialog>

<AfpButton :onclick="'dialogExample7.show()'">Custom Dialog</AfpButton>

Properties

Learn more about properties.

Name	Description	Reflects
`open`	Whether the dialog is open. Type `boolean` Default `false`
`closeable`	Allows closing by ESC key or clicking on the backdrop. Type `boolean` Default `false`
`noHeader` `noheader`	Hides the header section. Type `boolean` Default `false`
`noFooter` `nofooter`	Hides the footer section. Type `boolean` Default `false`
`autoClose` `autoclose`	Duration in milliseconds after which the dialog automatically closes. Set to 0 to disable auto-close. Type `number` Default `0`
`duration`	Animation duration in milliseconds for show/hide transitions. Type `number` Default `150`

Methods

Learn more about using methods.

Name	Description	Arguments
`show`	Programmatically open the dialog.	-
`hide`	Programmatically close the dialog.	-

Events

Learn more about events.

Name	Return	Description
`afp-show`	`void`	Emitted when the dialog is shown.
`afp-after-show`	`void`	Emitted after the dialog has been shown and transitions complete.
`afp-hide`	`void`	Emitted when the dialog is hidden.
`afp-after-hide`	`void`	Emitted after the dialog has been hidden and transitions complete.

Slots

Learn more about slots.

Name	Description
`default`	The main content slot for the dialog body.
`header`	The header slot for the dialog title or header content.
`actions`	The header actions slot for additional controls in the header.
`close-icon`	The close icon slot to customize the close button icon.
`footer`	The actions slot for footer buttons or actions.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The base part of the dialog (the `<dialog>` element).	`::part(base)`
`wrapper`	The content wrapper part inside the dialog.	`::part(wrapper)`
`header`	The header part of the dialog.	`::part(header)`
`header-title`	The title section of the header.	`::part(header-title)`
`actions`	The actions section in the header.	`::part(actions)`
`close-button`	The close button part.	`::part(close-button)`
`content`	The main content part of the dialog.	`::part(content)`
`footer`	The footer part of the dialog.	`::part(footer)`

CSS Custom Properties

Name	Description	Default
`--afp-dialog-width`	The width of the dialog.	`30rem`
`--afp-dialog-scale`	The scale transform of the dialog when shown.	`0.9`
`--afp-dialog-close-icon-size`	The size of the close icon.	`--afp-font-size-m`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-button

afp-icon

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/dialog/dialog.js';

Dialog

Examples #

Closeable #

Without Header #

Without Footer #

Duration #

Auto Close #

Customization #

Properties

Methods

Events

Slots

CSS Parts

CSS Custom Properties

Dependencies

Importing