Dialog
Usage notes
Dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions.
Default
Custom Sized Dialog
Scrolling Dialog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Fullscreen Dialog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Scrolling fullscreen Dialog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Variants
This is a fullscreen dialog. The footer is moved above, so buttons are on the top right of the dialog above content.
This is a normal dialog. The footer remains below, so buttons are beneath content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Stacking context
Closable
Movable
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.