Carbon Design System

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

Documentation

React

Web Components

Angular (Community)

Vue (Community)

Live demo

Theme selector

Variant selector

CodeSandbox React Web Components Angular Vue

Live editor for the Modal component


    <ModalWrapper
      buttonTriggerText="Launch modal"
      modalHeading="Modal heading"
      modalLabel="Label"
    >
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
    </ModalWrapper>

Edit this page on GitHub

Modal: Style

Modal: Accessibility