Modal

a centered dialog over a scrim, dismissed by the backdrop, Escape, or its actions.

Usage

A modal is a centered dialog over a scrim that blocks the rest of the page until it is resolved. Use it for a focused decision (a confirmation, a destructive action) or a short task that must finish before the user moves on, never for content that deserves its own route.

<div class="lucent-modal__scrim" id="delete-project" data-lucent-modal>
  <div class="lucent-modal" role="dialog" aria-modal="true" aria-labelledby="delete-project-title">
    <div class="lucent-modal__header">
      <div class="lucent-modal__heading">
        <span class="lucent-modal__title" id="delete-project-title">Delete project?</span>
        <p class="lucent-modal__subtitle">This action cannot be undone.</p>
      </div>
      <span class="lucent-icon-button lucent-icon-button--text lucent-icon-button--sm">
        <button class="lucent-icon-button__inner" type="button" aria-label="Close" data-lucent-close>
          <span class="lucent-icon lucent-icon--md" aria-hidden="true">
            <span class="material-icons lucent-icon__glyph">close</span>
          </span>
        </button>
      </span>
    </div>
    <div class="lucent-modal__body">
    </div>
    <div class="lucent-modal__footer">
      <span class="lucent-button lucent-button--ghost lucent-button--md">
        <button class="lucent-button__inner" type="button" data-lucent-close>
          <span class="lucent-button__label">Keep</span>
        </button>
      </span>
      <span class="lucent-button lucent-button--danger lucent-button--md">
        <button class="lucent-button__inner" type="button" data-lucent-close>
          <span class="lucent-button__label">Delete</span>
        </button>
      </span>
    </div>
  </div>
</div>

Structure

A header (title and subtitle, or your own lucentModalHeader content), a body for the message or form, and a footer of actions. informative has no footer; destructive turns the confirm button to danger. Project lucentModalActions to replace the default buttons.

Behaviour

The Angular kit renders the panel in a CDK overlay with a focus trap, scroll blocking and focus return, and closes on the scrim, Escape or the close button. In plain HTML the scrim is just markup: you own showing it, focus and Escape.

Do & Don't

check_circleDo

Reserve modals for a single focused decision or a short, blocking task.

cancelDon't

Put long forms or browsing inside a modal; reach for a page or a drawer instead.

check_circleDo

Label the confirm action with the real verb: "Delete", "Archive", "Publish".

cancelDon't

Rely on "Yes / No" for a destructive choice; the verb is what the user reads.

check_circleDo

Let Escape and a backdrop click dismiss non-destructive modals.

cancelDon't

Trap the user with no obvious way out.

Using it

Angular lucent-modal
import { LucentModal } from '@design-foundry/lucent-angular';
Stylesheet .lucent-modal
@design-foundry/lucent-styles/core.css

API

NameKindTypeDefaultDescription
open input, two-way boolean false visibility (two-way).
title input string '' header title.
subtitle input string '' line under the title.
variant input informative | confirmation | interactive | destructive informative footer layout and intent.
confirmLabel input string Confirm confirm button text.
cancelLabel input string Cancel cancel button text.
closed output void emits on any dismissal.
confirmed output void emits on confirm.
cancelled output void emits on cancel.

Slots

AttributeDescription
lucentModalHeader replaces the title and subtitle.
lucentModalActions replaces the default footer buttons.

Theming

The scrim, the panel surface, the radius and the divider between body and footer all come from these tokens.

Color (4)
Size & spacing (6)
Border & radius (2)
Shadow (1)
Type (4)
Other (1)