import 'package:mdl/mdl.dart';

main() {
    final Logger _logger = new Logger('dialog.Main');
    registerMdl();
    componentFactory().run().then((_) {
        final MaterialButton btnAlertDialog = MaterialButton.widget(dom.querySelector("#alertdialog"));
        final MaterialButton btnConfirmDialog = MaterialButton.widget(dom.querySelector("#confirmdialog"));
        final MaterialButton btnCustomDialog = MaterialButton.widget(dom.querySelector("#customdialog"));
        final MaterialAlertDialog alertDialog = new MaterialAlertDialog();
        final MdlConfirmDialog confirmDialog = new MdlConfirmDialog();
        final CustomDialog customDialog = new CustomDialog();
        int mangoCounter = 0;
        btnAlertDialog.onClick.listen((_) {
            _logger.info("Click on AlertButton");
            alertDialog("Testmessage").show().then((final MdlDialogStatus status) {
                _logger.info(status);
            });
        });
        btnConfirmDialog.onClick.listen((_) {
            _logger.info("Click on ConfirmButton");
            confirmDialog("Testmessage").show().then((final MdlDialogStatus status) {
                _logger.info(status);
            });
        });
        btnCustomDialog.onClick.listen((_) {
            _logger.info("Click on ConfirmButton");
            customDialog(title: "Mango #${mangoCounter} (Fruit)",
                yesButton: "I buy it!", noButton: "Not now").show().then((final MdlDialogStatus status) {
                _logger.info(status);
                mangoCounter++;
            });
        });
    });
}
To use any MDL component, you must include the minified CSS file in the <head> section of the page:
More about theming...
  <div class="demo-preview-block">
    <div class="demo-button">
        <button id="alertdialog" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Alert dialog</button>
        <button id="confirmdialog" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Confirm dialog</button>
        <button id="customdialog" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Custom dialog</button>
    </div>
  </div>

dialog

...will be here soon