Modal

A modal is a secondary window that appears on top of the main content, requiring user interaction.

Base Components

Overview

A modal is a secondary window that appears on top of the main content, requiring user interaction before they can return to the main interface.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FGl3138LYJ71TKOZEC0F8nJ%2FShipfaster-UI---v2.7.1-(LIVE)%3Fnode-id%3D273-102034%26t%3DpA8X0YmO6d7F2SMU-1

When should you use them?

Use modals for critical actions, confirmations, or important messages that require user attention and response, such as form submissions, alerts, and dialogs.

How should you use them?

  • Ensure the modal is easy to dismiss, with clear close buttons.
  • Keep the content of the modal concise and focused.
  • Avoid using too many modals, which can disrupt the user experience.
  • Ensure modals are accessible, with proper ARIA roles and keyboard navigation.
  • Use appropriate animations to smoothly introduce and dismiss modals.
Previous

No previous post
Up next

No next post