Skip to main content
Version: Previous

Web Components - Dialog

A dialog component presents content to the user. Unlike modal it doesn't prevent the user from interacting with other content on the page.

Set-up​

import { provideDesignSystem, alphaDialog } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaDialog());

Usage​

<alpha-card id="alpha-dialog">
  <h6>Dialog</h6>
  <alpha-button id="js-alpha-show-dialog">Show Dialog</alpha-button>

  <alpha-dialog>
    <h5 slot="top">Dialog title</h5>
    <p>Some text</p>
    <alpha-button slot="bottom" id="js-alpha-close-dialog">Close dialog</alpha-button>
  </alpha-dialog>
</alpha-card>

Use cases​

  • Confirmation popups

Additional resources​