Modal dialogs

Modal dialogs present popup information to inform users of important information and sometimes allow the user to take action.

Icon for component-modal

Default Modal

The Modal description from Figma goes here

1<div class="modal-default" tabindex="-1" id="myModal"> 2 <div class="modal-default-header"> 3 <h5 class="modal-default-title">Modal Visual</h5> 4 </div> 5 <div class="modal-default-body">here's some body text</div> 6 <div class="modal-default-footer">Here's some footer text</div> 7</div>
Icon for copy

Accessibility

Make it clear what this modal does for the user.

DO

  • What to do with modals

DON'T

  • What not to do with modals

Classes

Complete list of all CSS classes for the component.

NameClass
Default Modalmodal modal-default