Simple modals break the user’s attention away from the main UI in order to focus attention on a singular action or task. They can contain alerts about important information and allow the user to edit data.

You can use the KModal component to implement modals.


Modals have 3 sections that are always present: title, content, and actions.


  • Text prop below title
  • Secondary button


Keep this short, concise, and easy for the user to understand. Titles should not be structured as a sentence or question, and should not contain user-generated text. Use verbs in the imperative form. Do not use verbs that end in "-ing"; doing so may give users the impression that a task is in progress when it is not.



Along with text, the following UI elements are allowed in the content section of a modal:

  • Text field
  • Checkboxes
  • Radio
  • Select dropdown
  • List with vertical scrollbar
  • Loaders
  • Link buttons and icon buttons


If a modal happens to have a content section that expands beyond the max height, enable vertical scrolling.

There should never be horizontal scrolling inside a modal.


There is always a raised action button present at the bottom right. Should always be affirmative (i.e. will save data or continue user to the next step).

If there is a need for a secondary action, use a flat secondary button that is placed to the left of the action button. Secondary actions should always be dismissive (i.e. does not save any altered data, or cancels a next step).

The button group should be right-aligned.



Generally, modals should be of three sizes to accommodate varied screen sizes:

  • Small: 300px width. Default size of modals
  • Medium: 450px width. Use for text-heavy modals
  • Large: 100% width. Use on an exceptional, case-by-case basis

If there are other cases when a simple modal should be increased in width, follow Material’s guide: increment by 56px.


The scrim is the semi-translucent backdrop which covers the rest of the page. It should be rgba(0,0,0,0.7).


URL behavior

Simple modals should not have a URL.

Dismissing modals

Modals with a primary button can be dismissed in a few ways: through a “cancel/close” button within the modal, or pressing the escape key. For these modals, the enter key should trigger the primary action.

Modals that are purely informational and contain only a single dismissive button can also be dismissed with the escape key or the enter key.

Modals are never dismissible by clicking the scrim.


If the user experiences a client-side or server-side error, the corresponding validation messages should display within the modal.


Modals should be keyboard accessible for users who use assistive technology. Tabbing should limit the user to the options within a modal only and not extend to the UI beneath it.



Present one modal at a time


Overlay modals on modals


Use modals for simple, singular, focused tasks


Insert a table or other complex interactions


Use language which directly implies the result of the action


Use ambiguous language for titles, content, and actions


Present a single way to continue through and exit the modal


Use an ‘X’ button, back, or other duplicative actions