<dialog id="myDialog" class="hoo-dlg statusbar" open>
    {{> atoms-icon iconname='icon-info-filled'}}
    <div class="hoo-dlgcontent">This dialog comes without a backdrop and can be used for a
        statusbar for example. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_blank">The Dialog
            Element on MDN documentation</a></div>
    <div class="hoo-dlg-actions">
        {{#btn-closer}}{{> atoms-button-icon}}{{/btn-closer}}
    </div>
</dialog>
<dialog id="myDialog" class="hoo-dlg statusbar warning" open>
    {{> atoms-icon iconname='icon-warning-filled'}}
    <div class="hoo-dlgcontent">This dialog comes without a backdrop and can be used for a
        statusbar for example. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_blank">The Dialog
            Element on MDN documentation</a></div>
    <div class="hoo-dlg-actions">
        {{#btn-closer}}{{> atoms-button-icon}}{{/btn-closer}}
    </div>
</dialog>
<dialog id="myDialog" class="hoo-dlg statusbar error" open>
    {{> atoms-icon iconname='icon-info-filled'}}<div class="hoo-dlgcontent">This dialog comes without a backdrop and
        can be used for a
        statusbar for example. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_blank">The Dialog
            Element on MDN documentation</a></div>
    <div class="hoo-dlg-actions">
        {{#btn-closer}}{{> atoms-button-icon}}{{/btn-closer}}
    </div>
</dialog>
<dialog id="myDialog" class="hoo-dlg statusbar success" open>
    {{> atoms-icon iconname='icon-checkmark-circle-filled'}}<div class="hoo-dlgcontent">This dialog comes without a
        backdrop and can be used
        for a statusbar for example. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_blank">The
            Dialog Element on MDN documentation</a></div>
    <div class="hoo-dlg-actions">
        {{#btn-closer}}{{> atoms-button-icon}}{{/btn-closer}}
    </div>
</dialog>