Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Modal

The Modal component is a dialog window that is displayed on top of the main content. It is used to display content that is not essential to the main interaction flow but requires the user's attention.

banner-Modal

Anatomy

The Modal component consists of a container, a header, a body, and a footer. The header contains the title of the modal, the body contains the main content, and the footer contains any buttons or actions.

anatomy modal guideline

  1. Header: Contains the title of the modal

  2. Body: Contains the main content of the modal

  3. Footer: Contains buttons or actions related to the modal

Usage

The Modal component can be used to display additional content, such as forms, notifications, or alerts. The user can interact with the modal by clicking on buttons or filling out forms.

When to use

  • To display a form or input field
  • To display a confirmation message
  • To display important information or notifications
  • To prompt the user to take a specific action

When not to use

  • For navigation purposes
  • To display large amounts of information that may not fit within the modal’s limited space
  • To display information that is not essential to the user

Accessibility

The modal component should be accessible to all users, including those with disabilities. This can be achieved by using appropriate labels, contrast, and keyboard navigation. Accessibility Best Practices for the Modal Component:

  1. Keyboard Navigation: The modal component should be fully accessible using only a keyboard. This includes being able to open and close the modal, as well as navigate and interact with its content.
  2. Focus Management: The modal component should maintain focus within its content when opened, and return focus to the original element when closed. This ensures that users can navigate the page without losing their place.
  3. ARIA Roles: ARIA roles should be used to provide additional information about the modal component and its content to assistive technologies. For example, the modal component should have a role of “dialog” and the modal header should have a role of “heading”.
  4. Contrast: The text within the modal component should have a high contrast ratio with its background, ensuring that it is easily readable for users with visual impairments.
  5. Label Placement: All form fields and buttons within the modal component should have clear and concise labels. These labels should be placed in a visually prominent location, and their placement should not change as the user interacts with the modal.
  6. Close Button: The modal component should have a clearly visible close button, either in the header or footer of the modal, which can be activated using both the mouse and keyboard.
  7. Error Feedback: If there are any errors within the modal component, such as invalid form inputs, clear error feedback should be provided to the user. This feedback should be easy to understand and accessible to users with disabilities.
Alt text

Do

Only use maximum 2 button option, and make it contrast, primary and secondary

Alt text

Don't

Use too many buttons or actions in the modal

Content

The content of the modal should be:

  • Relevant to the user

  • Clear and concise

  • Free of errors

  • Easy to understand

  • Visually appealing