Bruhs home Overlays

Overlays

Use native <dialog> and popover elements where possible. The browser places them in the top layer, above the page's stacking order.

Dialog

Add dialog and open it with showModal(). The class provides the surface and backdrop. Its entrance animation respects reduced motion. Escape or a form with method="dialog" closes it.

Move to Trash?

You can restore the file until you empty the Trash.
HTML 
<button type="button" class="btn btn-outline" onclick="trash.showModal()">Delete file</button>
<dialog id="trash" class="dialog" aria-labelledby="trash-title">
  <form method="dialog" class="flex flex-col gap-4">
    <h2 id="trash-title" class="text-h3">Move to Trash?</h2>
    <p class="text-body-sm text-rambutan-400">You can restore the file until you empty the Trash.</p>
    <div class="flex justify-end gap-3">
      <button value="cancel" class="btn btn-ghost">Cancel</button>
      <button value="confirm" class="btn btn-danger">Move to Trash</button>
    </div>
  </form>
</dialog>

Menu

Use popover for the surface and menu-item for each row. Rows highlight on hover or when marked as active. The example stays open to show the styles. In an app, use a [popover] element.

HTML 
<div class="popover w-64" role="menu" aria-label="File">
  <button type="button" class="menu-item" role="menuitem">Rename</button>
  <button type="button" class="menu-item" role="menuitem" data-highlighted>Duplicate</button>
  <button type="button" class="menu-item" role="menuitem" aria-disabled="true">Share</button>
  <div class="my-1 border-t border-rambutan-100/10" role="separator"></div>
  <button type="button" class="menu-item text-lychee-300" role="menuitem">Move to Trash</button>
</div>

Tooltip

Use tooltip for the bubble. Show it on hover and keyboard focus. Label the trigger with aria-label or connect it to the tooltip with aria-describedby.

HTML 
<button type="button" class="group relative btn btn-ghost btn-icon" aria-describedby="tip-copy">
  <svg viewBox="0 0 16 16" fill="currentColor" class="size-4" aria-hidden="true">…</svg>
  <span id="tip-copy" role="tooltip" class="tooltip absolute bottom-full left-1/2 mb-2 -translate-x-1/2 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100">
    Copy link
  </span>
</button>

Layers

Use a named layer when the browser's top layer isn't available. The values set the stacking order. Use variables such as --z-popover in plain CSS.

  • z-raised 10 Focused cards and sticky table cells
  • z-sticky 20 Sticky headers and toolbars
  • z-overlay 40 Backdrops behind overlays
  • z-modal 50 Custom drawers and modals
  • z-popover 60 Menus and command palettes above modals
  • z-toast 70 Toasts and live notifications
  • z-tooltip 80 Tooltips above other named layers