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
95 examples
Modal
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
- Open source
Popconfirm
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
- Open source
Modal dialog
Atlassian Design System
- React
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Dialog
Auro
Alaska Airlines
- Web Components
- Sass
- Code examples
- Usage guidelines
- Open source
Alert
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Dialog
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Modal
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
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
- Web Components
- Code examples
- Usage guidelines
- Open source
Modal
Cauldron
Deque
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
Modal
Cedar
Recreational Equipment, Inc.
- Vue
- Sass
- CSS Modules
- Usage guidelines
- Code examples
- Open source
Alert Dialog
Chakra UI
- React
- CSS-in-JS
- Code examples
- Open source
Modal (Dialog)
Chakra UI
- React
- CSS-in-JS
- Code examples
- Open source
Modal
Clarity Design System
VMware
- CSS
- Angular
- Web Components
- Code examples
- Usage guidelines
- Open source
Modal
Coral
Talend
- React
- Code examples
- Tone of voice
- Open source
Modal
Crayons
Freshworks
- Web Components
- Code examples
- Open source
Modal
Decathlon Design System
- CSS
- React
- Svelte
- Vue
- Web Components
- Usage guidelines
- Code examples
- Accessibility
- Open source
Modal
Dell Design System
- Vanilla JS
- Code examples
- Usage guidelines
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
Dialog
eBay Playbook
- HTML
- React
- 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
Modal
Flowbite
- Tailwind CSS
- Open source
- Code examples
Dialog
Fluent UI
Microsoft
- React
- Web Components
- Mobile
- Usage guidelines
- Code examples
- Accessibility
- Open source
Modal
Fluent UI
Microsoft
- React
- Web Components
- Mobile
- Usage guidelines
- Code examples
- Accessibility
- Open source
Modal
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
Modal
Geist Design System
Vercel
- React
- Code examples
Dialog
generic-components
- Web Components
- Code examples
- Accessibility
- Open source
Modal
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
- Usage guidelines
ModalAlert
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
- Usage guidelines
Modal
giffgaff design system
- Usage guidelines
- Code examples
Dialog
Headless UI
Tailwind Labs
- React
- Vue
- Code examples
- Accessibility
- Open source
Modal
Helios
Hashicorp
- Ember
- Sass
- Code examples
- Usage guidelines
- 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
Material Design
Google
- Mobile
- Web Components
- Sass
- Usage guidelines
- Open source
- Accessibility
Dialog
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Modal
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Dialog
Morningstar Design System
- Vue
- Usage guidelines
Modal
Morningstar Design System
- Vue
- Usage guidelines
Notification
Morningstar Design System
- Vue
- Usage guidelines
Modal
Mozilla Protocol
- Handlebars
- Sass
- Usage guidelines
- Open source
Dialog
Nessie
Nederlandse Spoorwegen
- Web Components
- Tailwind CSS
- Usage guidelines
- Code examples
Modal
NextUI
- React
- CSS-in-JS
- Code examples
- Open source
Modal
Nord Design System
Nordhealth
- Web Components
- Code examples
- Usage guidelines
Timeout modal
ONS Design System
Office for National Statistics
- HTML
- Nunjucks
- Sass
- Code examples
- Usage guidelines
- Accessibility
- 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
Pajamas
GitLab
- Vue
- Usage guidelines
- Code examples
- Open source
Modal
Paste
Twilio
- React
- CSS-in-JS
- Usage guidelines
- Code examples
- Tone of voice
- Accessibility
- Open source
About modal
PatternFly
Red Hat
- React
- Sass
- Tone of voice
- Open source
- Usage guidelines
Modal
PatternFly
Red Hat
- React
- Sass
- Tone of voice
- Open source
- Usage guidelines
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
Modal
Porsche Design System
- Web Components
- Angular
- React
- Vue
- Code examples
- Open source
Dialog
Primer
GitHub
- React
- Code examples
- Open source
Dialog
Quasar Framework
- Vue
- Accessibility issues
- Code examples
- Open source
Alert Dialog
Radix Primitives
WorkOS
- React
- Code examples
- Open source
Dialog
Radix Primitives
WorkOS
- React
- Code examples
- Open source
Dialog (Modal)
Reach UI
- React
- Accessibility
- Code examples
- Open source
Alert Dialog
Reach UI
- React
- Accessibility
- Code examples
- Open source
Dialog (Modal)
Reakit
- React
- Code examples
- Open source
- Accessibility
Modal
Ruter Components
- React
- Code examples
- Unmaintained
Dialogue
SEB Design Library
Skandinaviska Enskilda Banken
- Sass
- React
- Angular
- Code examples
- Usage guidelines
Modal
Seeds
Sprout Social
- React
- Code examples
- Usage guidelines
- Tone of voice
Alert Dialog
shadcn/ui
- React
- Tailwind CSS
- Code examples
- Open source
Dialog
shadcn/ui
- React
- Tailwind CSS
- Code examples
- Open source
Dialog
Shoelace
- Web Components
- Code examples
- Open source
Modal
Spark Design System
Quicken Loans
- React
- Angular
- Code examples
- Usage guidelines
- Open source
- Unmaintained
Dialog
Spectrum
Adobe
- CSS
- Web Components
- React
- Code examples
- Usage guidelines
- 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
Wanda
Wonderflow
- React
- CSS Modules
- Code examples
- Open source
Modal
Wise Design
- Mobile
- Usage guidelines
- Tone of voice