Popups
Popup flows for confirmation, danger actions, and completion feedback
This page standardizes popup behavior and visual language for high-attention actions. Use contextual intent, clear message hierarchy, and explicit action buttons. The playground produces copy-ready templates for success, warning, danger, and info dialogs.
Critical
actions
Success
confirmations
Live controls
Copy-ready snippets
1. Variant Matrix
Common popup patterns for product workflows
Success and info prompts
Warning and destructive prompts
2. Interaction Playground
Build popup recipes from controls
Live Output
Success popup with confirm + cancel actions.
Use copy recipe for generated template.
3. Message Hierarchy
Order title, context, and action language for clarity
Title rules
- Use verb-first titles for actionable prompts.
- Keep title under 5 words for quick scanning.
- Avoid vague titles like "Alert" or "Message".
Body rules
- State what will happen after confirm.
- For danger actions, include irreversible consequence.
- Prefer one sentence plus optional detail line.
4. State Modeling
Intent color and action style by severity
Low-risk confirmation
Use success/info tone with soft primary action.
High-risk confirmation
Use danger tone and explicit destructive action labels.
5. Composition Patterns
Integrate popup patterns with forms, tables, and bulk actions
Form submission prompt
Show success popup after save only when flow context benefits from explicit confirmation.
Bulk table action prompt
Require destructive confirmation when impact spans multiple rows or irreversible data changes.
6. Real-use Snippets
Copy-ready popup markup and utility helpers
Success Popup
<div class="popup-card popup-card--success">
<div class="popup-card__head">
<span class="popup-card__icon"><i class="fa-solid fa-check"></i></span>
Saved successfully
</div>
<p>Project settings were saved successfully.</p>
<div class="popup-card__actions">
<button class="btn btn-primary btn-sm">Okay</button>
</div>
</div>
Danger Confirm
<div class="popup-card popup-card--danger">
<h4>Delete workspace?</h4>
<p>This action permanently deletes workspace data and cannot be undone.</p>
<div class="popup-card__actions">
<button class="btn btn-outline btn-sm">Cancel</button>
<button class="btn btn-danger btn-sm">Delete</button>
</div>
</div>
Intent Utility
success -> popup-card--success warn -> popup-card--warn danger -> popup-card--danger info -> popup-card--info