Components / Modal
Modal
Modal dialog with frosted glass backdrop, spring-bounce scale animation, header icon, exit animation, focus trap, body scroll lock, and configurable close behavior.
overlaysv0.5.0
Playground
Examples
With icon
A beautiful, fast, and modern component library for building accessible and customizable web applications with ease.
<cg-button onclick="this.nextElementSibling.open=true">Open Modal</cg-button><cg-modal title="Welcome to Cognivo" icon="sparkle" size="sm"><p>A beautiful, fast, and modern component library for building accessible and customizable web applications with ease.</p><div slot="footer" style="display:flex;flex-direction:column;width:100%;gap:8px;"><cg-button full onclick="this.closest('cg-modal').open=false">Continue</cg-button></div></cg-modal>Confirm dialog
Are you sure you want to proceed? This action cannot be undone.
<cg-button onclick="this.nextElementSibling.open=true">Open Confirm</cg-button><cg-modal title="Confirm Action" icon="warning" size="sm"><p>Are you sure you want to proceed? This action cannot be undone.</p><div slot="footer"><cg-button variant="secondary" onclick="this.closest('cg-modal').open=false">Cancel</cg-button><cg-button onclick="this.closest('cg-modal').open=false">Confirm</cg-button></div></cg-modal>No icon
Configure your preferences below.
<cg-button onclick="this.nextElementSibling.open=true">Open Simple</cg-button><cg-modal title="Settings"><p>Configure your preferences below.</p><div slot="footer"><cg-button variant="tertiary" onclick="this.closest('cg-modal').open=false">Cancel</cg-button><cg-button onclick="this.closest('cg-modal').open=false">Save</cg-button></div></cg-modal>Persistent
You must complete this step before continuing.
<cg-button onclick="this.nextElementSibling.open=true">Open Persistent</cg-button><cg-modal title="Required Action" icon="shield" persistent><p>You must complete this step before continuing.</p><div slot="footer"><cg-button full onclick="this.closest('cg-modal').open=false">Done</cg-button></div></cg-modal>Import
import { CgModal } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-modal';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Open state |
title | string | "" | Modal title in header |
icon | string | "" | Icon name displayed above title (uses cg-icon) |
size | "sm" | "md" | "lg" | "xl" | "md" | Modal width — sm (400), md (560), lg (720), xl (960) |
closable | boolean | true | Show close button and allow Escape key |
persistent | boolean | false | Prevent closing by clicking backdrop |
loading | boolean | false | Show loading overlay |
error | string | "" | Error message banner |
rounded | "none" | "sm" | "md" | "lg" | "full" | "lg" | Border radius variant |
Events
| Event | Detail | Description |
|---|---|---|
cg-modal-open | {} | Modal opened |
cg-modal-close | {} | Modal closed |