Skip to main contentCarbon Design System

Modal

Preview the modal component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

React
react icon
Feature flag
Web Components
webcomponents icon
Angular (Community)
angular icon
Vue (Community)
vue icon

Feature flags

A feature flag has been added to modal to improve accessibility and changes parts of its functionality, not its visual appearance. For more code-specific feature flag information, refer to the @carbon/react framework.

The 

enable-experimental-focus-wrap-without-sentinels
flag is a new approach to focus wrap behavior that modifies the DOM to no longer include hidden “sentinel nodes” used to mark the beginning and end of the wrapped focus. This behavior looks at all interactive child nodes and wraps focus based on the tab order of those nodes.

Live demo

      This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.

      Edit this page on GitHub
      Previous
      Modal: Style
      Next
      Modal: Accessibility