Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

delete

Delete this component?

This action cannot be undone. The component will be permanently removed from your design system.

<div class="adlg-overlay">
  <div class="adlg">
    <div class="adlg-title">Delete this component?</div>
    <div class="adlg-desc">This action cannot be undone.</div>
    <div class="adlg-actions">
      <button class="adlg-btn cancel">Cancel</button>
      <button class="adlg-btn danger">Delete</button>
    </div>
  </div>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

Usage

Import

<link rel="stylesheet" href="ds-shared.css">

Basic structure

<div class="adlg">
  <div class="adlg-title">Dialog title</div>
  <div class="adlg-desc">Dialog description.</div>
  <div class="adlg-actions">
    <button class="adlg-btn cancel">Cancel</button>
    <button class="adlg-btn danger">Confirm</button>
  </div>
</div>

Examples

Confirmation dialog

logout

Leave without saving?

You have unsaved changes. If you leave now, your changes will be lost.

<div class="adlg">
  <div class="adlg-title">Leave without saving?</div>
  <div class="adlg-desc">Your changes will be lost.</div>
  <div class="adlg-actions">
    <button class="adlg-btn cancel">Stay</button>
    <button class="adlg-btn confirm">Leave</button>
  </div>
</div>

API Reference

Elements

Class	Description
`adlg`	Dialog container card
`adlg-title`	Bold headline
`adlg-desc`	Supporting description text
`adlg-actions`	Flex row for action buttons
`adlg-btn danger`	Destructive action (red)
`adlg-btn confirm`	Affirmative action (black)
`adlg-btn cancel`	Dismissal (neutral gray)
`adlg-dk`	Dark mode modifier

← Previous Alert Next → Avatar