Basic
Attach the directive to a regular action and listen for the confirmed event.
Icons
Icons by @ng-icons/tabler-icons
The component library does not provide icons.
Component Blueprint
Confirm Popover
Anchored confirmation prompt that can attach to buttons, cards, rows, and custom trigger components.
02 Usage
TS
import { FrButtonModule } from '@frame-ui-ng/components/button';
import { FrConfirmPopoverModule } from '@frame-ui-ng/components/confirm-popover';TS
shipRelease(): void {
// Continue with the confirmed action.
}HTML
<button
frButton
type="button"
[frConfirmPopover]="{
title: 'Ship release?',
description: 'This will notify everyone watching the release channel.'
}"
(frConfirmPopoverConfirmed)="shipRelease()"
>
<span frButtonLabel>Ship release</span>
</button>03 Examples
Any Trigger
The directive can attach to cards, rows, icon buttons, or custom components. Non-native triggers should provide role and keyboard focus.
WorkspaceDesign SystemClick the card to confirm an archive action
Custom Labels
Override title, description, and action labels directly on the host.
Positioning
Use the same side and alignment language as popover for anchored placement.
RTL support
Confirmation content inherits direction and can align to the logical end edge.
05 Token Inspector
Confirm popover inherits the popover surface tokens.
06 Design Tokens
Confirm popover inherits popover surface, typography, footer, and motion tokens.