• Blog
  • Getting started
  • Guidelines
  • AI
  • Resources
  • Blog
  • Workspace overview

    • Structure
    • Creating an experience
    • Examples
    • Resources

    • All foundations
      • Overview
      • Types
      • Style
      • Interaction
      • Dashboard
      • Overview
      • Palettes
      • Using color
    • Elevation
      • Overview
      • Using
      • Creating
      • Library
      • Overview
      • Using
      • Creating
      • Library
    • Grids & layouts
    • Corner radius
      • Overview
      • Spacing usage
      • Overview
      • Body copy & sizes
      • Font styles

    • All patterns
      • Card patterns
      • Use cases
      • Recommendations
      • Contextual side bar patterns
      • Use cases
      • Recommendations
      • Email patterns
      • Use cases
      • Recommendations
    • Filtering
      • Form patterns
      • Form controls
    • Guided experiences
      • Loading patterns
      • Use cases
      • Recommendations
      • Messaging patterns
      • Use cases
      • Recommendations
      • Navigation
      • Navigation
components
      • Making the right choice
      • Templates and combining components

  • Components
  • App shells
  • Modals
  • Page templates

Modals

Interactive windows that open above a page and close when the user takes some action.

Loading items
Alert Modal
Provides information relating to the component action. For example, when a user presses a delete button, you can have an alert modal pop up to let the user know they can't undo a delete action.
Confirm
Asks a user to confirm the component action. For example, when a user presses a delete button, the user would have to confirm the deletion of data. You can choose the confirm options from the primary and secondary button label fields, such as "Yes" or "Cancel".
Confirm and destroy
Lets the user know the seriousness of an action, and asks them whether they want to proceed with the action. It’s more direct than the Confirm modal, usually relating to deleting or erasing content.
Custom Modal Container
Use to create a custom overlay window that requires the user to complete an action or provide information to return to the main application
IFrame Modal Container
Provides a way to load full featured content from the same origin or CORS enabled URLs within a modal using iframe
Viewport Modal Container
Use to dynamically pass content into your viewport modal through an event binding using a client script.
Horizon Design System
  • Terms and conditions
  • GDPR
  • Privacy statement
  • Cookie policy
  • Cookie preferences
  • Business continuity
  • © 2026 ServiceNow. All rights reserved.