Shipfaster: UI Components


Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.


Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

Modals are used to present critical information or request user input needed to complete a user’s workflow. Modals interrupt a user’s workflow by design. When active, a user is blocked from the on-page content and cannot return to their previous workflow until the modal task is completed or the user dismisses the modal. While effective when used correctly, modals should be used sparingly to limit disruption to the user.

When to use

  • Use a modal to request information that is preventing the system from continuing a user-initiated process.
  • Use a modal to notify the user of urgent information concerning their current work. Modal are commonly used to report system errors or convey a consequence of a user’s action.
  • Use a modal to confirm user decisions. Clearly describe the action being confirmed and explain any potential consequences that it may cause. Both the title and the button should reflect the action that will occur. If the action is destructive or irreversible then use a danger action.


Anatomy of modal
  1. Leading Icon: Supports the modal message visually.
  2. Modal details: Group of title and description which conveys the modal's context and information.
  3. Dismiss Icon: Optionally lets users dismiss the modal.
  4. Actions: Adds necessary actions that the user can take.

Best Practices

  1. Do not use modals to show error, wait, or success states.
  2. Make a dismiss control visible.
  3. Put a modal window in a focus.
  4. Never use nested modals.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

All Products

Shipfaster UI: Figma UI Kit & Design System

Access 8,000+ Customizable components to supercharge your design workflow.

Pricing Icon
3,200+ of Downloads
Review Stars
3,200+ downloads
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.