Component primitive

Brand Dialog

<brand-dialog> wraps Web Awesome's <wa-dialog> and inherits its focus trap, backdrop, and Escape-to-close behaviours. Call.show() / .hide() from JS or toggle the openattribute.

<brand-dialog>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-dialog>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Basic

Open dialog

Use dialogs for focused decisions that should pause the surrounding workflow.

Close with the visible button, the Escape key, or the backdrop.

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('wa-after-hide', () => {
  console.log('dialog closed');
});