Components

Dialogs & Alerts

Native dialog patterns — sizes, scrollable, confirmation, and stacked — plus notification banners, inline labels, and toast messages.

Dialogs

Structured Dialog

Use dialog-header, dialog-body, and dialog-footer for a consistent header/body/footer layout.

<dialog id="my-dialog" aria-labelledby="dialog-title">
  <div class="dialog-header">
    <h3 id="dialog-title">Edit Profile</h3>
    <button class="dialog-close" aria-label="Close">&times;</button>
  </div>
  <div class="dialog-body">
    <form class="form">...</form>
  </div>
  <div class="dialog-footer">
    <button class="btn btn-secondary">Cancel</button>
    <button class="btn btn-primary">Save</button>
  </div>
</dialog>

Sizes

Dialog Sizes

<dialog class="dialog-sm">...</dialog>  <!-- 24rem -->
<dialog>...</dialog>                     <!-- Default -->
<dialog class="dialog-lg">...</dialog>   <!-- 48rem -->
<dialog class="dialog-full">...</dialog> <!-- Viewport -->

Pattern

Confirmation Dialog

<dialog class="dialog-confirm" aria-labelledby="confirm-title">
  <div class="dialog-body">
    <h3 id="confirm-title">Delete this item?</h3>
    <p class="text-secondary">This cannot be undone.</p>
  </div>
  <div class="dialog-footer">
    <button class="btn btn-secondary">Cancel</button>
    <button class="btn btn-red">Delete</button>
  </div>
</dialog>

Pattern

Scrollable Dialog

Advanced

Stacked Dialogs

<dialog class="dialog-layer-1">...</dialog>
<dialog class="dialog-layer-2 dialog-sm">...</dialog>
<dialog class="dialog-layer-3">...</dialog>

Alerts

Standard Alerts

<div class="alert alert-blue" role="status">
  <span class="alert-content">Info message here.</span>
</div>
<div class="alert alert-green" role="status">
  <span class="alert-content">Success!</span>
</div>
<div class="alert alert-red" role="alert">
  <span class="alert-content">Error occurred.</span>
</div>

Outline

Outlined Alerts

Tinted background with a full border using alert-outline.

<div class="alert alert-blue alert-outline">
  <span class="alert-content">Outlined info alert.</span>
</div>

Ghost

Ghost Alerts

Transparent background with border only using alert-ghost.

Interactive

Dismissible Alerts

Add an alert-dismiss button to make alerts closeable.

<div class="alert alert-blue" role="alert">
  <span class="alert-content">Dismissible alert.</span>
  <button class="btn btn-ghost btn-white btn-icon btn-xs" aria-label="Dismiss">&times;</button>
</div>

Labels

Inline Labels & Status

Outlined Labels

<span class="label label-blue">Blue</span>
<span class="label label-outline">Outline</span>
<span class="label label-outline label-red">Red Outline</span>

Badges

Badges

<span class="badge badge-blue">5</span>
<span class="badge badge-red">99+</span>
<span class="badge badge-small badge-green">sm</span>

Toast

Toast Messages

Fixed-position toast notifications using tools-message (alias: message). Hidden by default — toggle display with JavaScript.

<div class="message message-green" role="status" aria-live="polite">
  <span class="alert-content"><strong>Saved!</strong> Changes applied.</span>
  <button class="btn btn-ghost btn-white btn-icon btn-xs" aria-label="Dismiss">&times;</button>
</div>

<!-- For errors, use role="alert" and aria-live="assertive" -->
<div class="message message-red" role="alert" aria-live="assertive">
  <span class="alert-content">Error occurred.</span>
  <button class="btn btn-ghost btn-white btn-icon btn-xs" aria-label="Dismiss">&times;</button>
</div>

Accessibility

• Use role="status" and aria-live="polite" for informational toasts — screen readers announce them after finishing the current task.
• Use role="alert" and aria-live="assertive" for errors — screen readers interrupt immediately.
• Always include a dismiss button with aria-label="Dismiss".
• Toasts should auto-dismiss after a reasonable delay (5–10s), but not for error messages that require user action.