Link button to dialogue

[RitaOak]

Hi,

I'm using your components for a project but I've run into a problem: it seems that I can't associate a button to open a dialogue. Right now this is my code:

<material-button id="open-modal" label="Sign In"></material-button>
<material-dialog id="modal">
    <h1 slot="header">Sign In</h1>
    <p slot="body"> Sign In here </p>
    <div slot="footer">
      <button id="action">close</button>
    </div>
</material-dialog>

The button itself shows up well, I just can't open dialogue with it. Thanks in advance!

[DannyMoerkerke]

You will need to setup event handlers on the buttons to open and close the dialog:

const dialog = document.querySelector('#modal');
const openButton = document.querySelector('#open-modal');
const closeButton = document.querySelector('#action');

openButton.addEventListener('click', () => dialog.open());
closeButton.addEventListener('click', () => dialog.close());