A modal is an interface element that appears over other content. It requires an interaction from the user before they can return to whatever is underneath.
Component
Modal
Other names: Dialog, Popup, Modal window
61 examples
Modal
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
Popconfirm
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
Modal dialog
Atlassian Design System
- React
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
- Open source
Modal
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
Modal
Bolt Design System
Pegasystems
- Sass
- Twig
- Web Components
- Code examples
- Tone of voice
- Open source
Modal
Bootstrap
- Sass
- Code examples
- Accessibility
- Open source
Modal
Bulma
- Sass
- Code examples
- Accessibility issues
- Open source
Modal
Carbon Design System
IBM
- React
- Vanilla JS
- Angular
- Vue
- Svelte
- Code examples
- Usage guidelines
- Open source
Modal
Cauldron
Deque
- jQuery
- Code examples
- Usage guidelines
- Accessibility
Alert
Cauldron
Deque
- jQuery
- Code examples
- Usage guidelines
- Accessibility
Modal
Cedar
Recreational Equipment, Inc.
- Vue
- Usage guidelines
- Code examples
Alert Dialog
Chakra UI
- React
- CSS-in-JS
- Accessibility
- Code examples
- Open source
Modal (Dialog)
Chakra UI
- React
- CSS-in-JS
- Accessibility
- Code examples
- Open source
Modal
Clarity Design System
VMware
- CSS
- Angular
- Web Components
- Code examples
- Usage guidelines
- Open source
Modal
Crayons
Freshworks
- Web Components
- Code examples
- Open source
Alert Dialog
eBay MIND Patterns
- Accessibility
- Usage guidelines
- Open source
Confirm Dialog
eBay MIND Patterns
- Accessibility
- Usage guidelines
- Open source
Dialog
eBay MIND Patterns
- Accessibility
- Usage guidelines
- Open source
Input Dialog
eBay MIND Patterns
- Accessibility
- Usage guidelines
- Open source
Lens Dialog
eBay MIND Patterns
- Accessibility
- Usage guidelines
- Open source
Modal
Edison Design System
General Electric
- Web Components
- Usage guidelines
- Code examples
Modal
Elastic UI framework
Elastic
- React
- Sass
- Code examples
- Open source
Modal
Elisa Design System
- React
- Usage guidelines
- Code examples
- Accessibility
Dialog
Evergreen
Segment
- React
- Open source
Dialog
generic-components
- Web Components
- Code examples
- Accessibility
- Open source
Modal
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
Modal
giffgaff design system
- Usage guidelines
- Code examples
Modal
Goldman Sachs Design System
- Tone of voice
- Usage guidelines
Dialog (modal)
Headless UI
Tailwind Labs
- React
- Vue
- Code examples
- Accessibility
- Open source
Dialog
Helsinki Design System
City of Helsinki
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
Modal
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
Modal
Lightning Design System
Salesforce
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Prompt
Lightning Design System
Salesforce
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Modal
Luna
Sainsbury’s
- React
- Sass
- Usage guidelines
- Code examples
- Tone of voice
Dialog
Mailchimp design system
- Code examples
Dialog
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Modal
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Modal
Mozilla Protocol
- Handlebars
- Sass
- Usage guidelines
- Open source
Dialog
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Modal
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Lightbox
Oxygen
Repsol
- HTML
- Code examples
- Usage guidelines
Modal
Paste
Twilio
- React
- Usage guidelines
- Code examples
- Tone of voice
- Accessibility
- Open source
Modal
Pharos
JSTOR
- Web Components
- Sass
- Usage guidelines
- Open source
- Code examples
- Accessibility
- Tone of voice
Modal
Polaris
Shopify
- React
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Alert Dialog
Radix Primitives
Modulz
- React
- Code examples
- Open source
Dialog
Radix Primitives
Modulz
- React
- Code examples
- Open source
Dialog (Modal)
Reach UI
- React
- Accessibility
- Code examples
- Open source
Dialog (Modal)
Reakit
- React
- Code examples
- Open source
- Accessibility
Dialog
Royal Navy design system
- React
- Usage guidelines
- Code examples
- Open source
Modal
Royal Navy design system
- React
- Usage guidelines
- Code examples
- Open source
Modal
Ruter Components
- React
- Code examples
Dialogue
SEB Design Library
Skandinaviska Enskilda Banken
- Sass
- React
- Angular
- Code examples
- Open source
- Usage guidelines
Modal
Seeds
Sprout Social
- React
- Code examples
- Usage guidelines
- Tone of voice
Dialog
Shoelace
- Web Components
- Code examples
- Open source
Modal
Solid
Buzzfeed
- CSS
- Code examples
- Usage guidelines
- Accessibility issues
Modal
Spark Design System
Quicken Loans
- React
- Angular
- Code examples
- Usage guidelines
- Open source
Dialog
Spectrum CSS
Adobe
- CSS
- Code examples
- Tone of voice
- Open source
Modal
Stacks
Stack Overflow
- Stimulus
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Modal
Thumbprint
Thumbtack
- React
- Sass
- Code examples
- Open source
Modal
Vercel Design
- React
- Code examples