ConfirmPopup

Confirm popup displays a confirmation overlay displayed relatively to its target.

Variants

There are 2 different confirm popups: Default and Danger with 2 different variants for each in terms of size.

Demo

Guidance

• Confirm popup should be used when the the confirmation can be displayed relative to the action button.
• Use “Spacer 1” gap between the action element and the confirmation popups.
• Dialog box and modals are of the highest elevation states in the system. Use “Elevation LG” for Confirmation popups.
• Start position of the popup should be left aligned to the action item.

When to use

• Use confirm popup for confirming an action the user is about to take without interrupting any flow.
• When the user requires a spot action to a CTA.

When not to use

• If the user requires uninterrupted attention and action must be taken before moving forward, consider using /dialog/(dialog.md) instead.
• If the CTA doesn't require confirmation of any kind and just displaying additional actions, consider using other appropriate components such as menuinstead.

Considerations

Designer assets

figma

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

vue

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP