Confirm Modal

Typed confirmation dialog built on modal primitives with configurable title, description, and action labels.

01 Hero Preview

Grid: 8px · Scale: 1:1

02 Usage

import { Component, inject } from '@angular/core';
import { FrButtonModule } from '@frame-ui-ng/components/button';
import { FrConfirmModalModule } from '@frame-ui-ng/components/confirm-modal';

shipRelease(): void {
  // Continue with the confirmed action.
}

HTML

<button
  frButton
  type="button"
  [frConfirmModal]="{
    title: 'Ship release?',
    description: 'This will notify everyone watching the release channel.'
  }"
  (frConfirmModalConfirmed)="shipRelease()"
>
  Ship release
</button>

03 Examples

Basic

Open a typed confirmation flow from code and react only when the user chooses the confirm action.

Component Sheet

Grid: 8px · Scale: 1:1

Programmatic

Inject the service when the confirmation should be opened from application logic instead of a direct trigger.

Component Sheet

Grid: 8px · Scale: 1:1

Custom Labels

Adjust the title, description, and action copy to match the consequence of the decision.

Component Sheet

Grid: 8px · Scale: 1:1

05 Token Inspector

Confirm modal inherits the modal surface tokens, so it can be themed together with every other dialog.

06 Design Tokens

Confirm modal reuses modal tokens so confirmation flows stay visually aligned with the rest of the overlay system.