Modals have four sizes depending on the width of content that needs to be displayed. Medium is the default size.
When the content of the modal is larger than the screen supports, it becomes scrollable with consistent spacing between the screen edge and the modal.
For mandatory workflows and notifications, we can also remove the close functionality. The close button in the Modal Header does not appear and clicking on the backdrop doesn't do anything.
The Modal Footer can have a few layouts depending on the needs of the Modal. Usually they fall into one of these four layouts.
A Modal should:
Titles should have a clear verb + noun question or statement.
Follow the content guidelines for headings and subheadings.
Use imperative verbs when telling users what they need to know or do. Don’t use permissive language like "you can".
Users should be able to predict what will happen when they click a button.
Lead with a strong verb that encourages action. Use a verb/noun pair on actions in most cases. Common actions like Save, Close, or Cancel do not require an accompanying noun.
import { Modal } from '@servicetitan/design-system';