CogniSyncNotifications
Modal-style notification cards: 16px semibold heading, 14px regular description, dismiss (X), and two actions — ghost secondary plus outline or solid primary. Distinct from compact Alerts toast bars.
Without icon (default)
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data.
With top icon
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data.
With leading icon
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data.
Uploading (inline progress)
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data.
File uploading
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data.
Guidance_left_side.docx
245.67MB
With avatar
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data.
Solid primary (brand)
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data.
Anatomy
Surface
White panel, max-width 444px, 6px radius, border #E2E8F0, shadow-lg pair, 16px padding, 12px vertical gaps.
Heading
Geist semibold 16px, line-height ~1.43, color #020617.
Description
Geist regular 14px, line-height 1.4, color #475467.
Dismiss
22px × 22px touch target for X; muted hover surface.
Top / leading icon
Optional `topIconSlot` and `leadingIconSlot` replace the default circle markers; use any 16px glyph inside the bordered 32px control.
Actions
Ghost/text secondary (e.g. Dismiss) plus outline secondary or solid primary; 6px button radius per system.