HUD

Selectors

.hud-container: Fixed center-screen container for HUD notifications.
.hud: Rounded transient notification with blur backdrop.
.hud-label: Text label inside the HUD pill.
showHUD(label, options?): JS API — create and show a HUD. Options: { icon: '<svg>…</svg>', duration: 1500 }. Returns object with .dismiss() method. Default duration is 1.5 seconds.

Saved

Copied

Deleted

HTML

<div class="space-y-3 flex flex-col items-center">
  <div class="hud">
    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
    <span class="hud-label">Saved</span>
  </div>
  <div class="hud">
    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"/></svg>
    <span class="hud-label">Copied</span>
  </div>
  <div class="hud">
    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>
    <span class="hud-label">Deleted</span>
  </div>
</div>

Live Demo

HTML

<button class="btn-filled" onclick="showHUD('Settings saved')">Show HUD</button>
<button class="btn-gray" onclick="showHUD('Copied to clipboard', { icon: '<svg fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; viewBox=&quot;0 0 24 24&quot;><path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; d=&quot;M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75&quot;/></svg>' })">Custom Icon</button>

Usage

Transient confirmation overlay. Call showHUD(label, options) to display a centered notification that auto-dismisses after 1.5 seconds.

<!-- npm -->
<script src="node_modules/ciderui/js/cider.js"></script>

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/gh/newlix/ciderui@main/js/cider.js"></script>

// Basic
showHUD("Saved");

// Custom icon and duration
showHUD("Copied", {
  icon: '<svg ...>...</svg>',
  duration: 5000
});

// Programmatic dismiss
var hud = showHUD("Uploading...", { duration: 60000 });
hud.dismiss();

Accessibility

The .hud-container uses role="status" with aria-live="polite" so screen readers announce HUD text when it appears.
showHUD() creates the container automatically if absent.
HUD icons should carry aria-hidden="true" — only the text label is announced.
HUDs are non-interactive and cannot be dismissed by keyboard.