Brand
Changelog v1.4

Brand Dialog

<brand-dialog> wraps Shoelace's <sl-dialog> and inherits its focus trap, backdrop, and Escape-to-close behaviours. Call .show() / .hide() from JS or toggle the open attribute.

Basic

Open dialog

This is a basic dialog. Click the backdrop, press Escape, or hit the close button to dismiss.

With footer actions

Delete item

This action cannot be undone. Are you sure you want to delete this item?

Cancel Delete

Headerless

Open headerless

Custom title inline

When no-header is set, the dialog shows no default header or close button. Provide your own header treatment inside the body.

Done

Form inside a dialog

Edit profile
Admin Editor Viewer
Cancel Save

Usage

import { BrandDialog } from '@brandos/ui';

<brand-dialog id="confirm" label="Confirm delete">
  <p>This cannot be undone.</p>
  <brand-button slot="footer" variant="natural">Cancel</brand-button>
  <brand-button slot="footer" variant="destructive">Delete</brand-button>
</brand-dialog>

// JS
document.getElementById('confirm').show();
document.getElementById('confirm').addEventListener('sl-after-hide', () => {
  console.log('dialog closed');
});