Brand
Changelogv1.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 openattribute.

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?

CancelDelete

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
AdminEditorViewer
CancelSave

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');
});