Skip to contentShopify logoPolaris
  • What’s new
  • Getting started
  • Foundations
  • Design
  • Content
  • Patterns
    New
  • Components
    • Actions
      • Account connection
      • Button
      • Button group
      • Page actions
    • Layout and structure
      • Alpha card
        Alpha
      • Alpha stack
        Alpha
      • Bleed
        Alpha
      • Box
        Alpha
      • Callout card
      • Columns
        Alpha
      • Divider
        Alpha
      • Empty state
      • Form layout
      • Inline
        Alpha
      • Layout
      • Legacy card
        Legacy
      • Legacy stack
        Legacy
      • Media card
      • Page
    • Selection and input
      • Autocomplete
      • Checkbox
      • Choice list
      • Color picker
      • Combobox
      • Contextual save bar
      • Date picker
      • Drop zone
      • Filters
      • Form
      • Index filters
      • Inline error
      • Legacy filters
        Legacy
      • Radio button
      • Range slider
      • Select
      • Tag
      • Text field
    • Images and icons
      • Avatar
      • Icon
      • Keyboard key
      • Thumbnail
      • Video thumbnail
    • Feedback indicators
      • Badge
      • Banner
      • Exception list
      • Loading
      • Progress bar
      • Skeleton body text
      • Skeleton display text
      • Skeleton page
      • Skeleton tabs
      • Skeleton thumbnail
      • Spinner
      • Toast
    • Typography
      • Text
        Beta
    • Tables
      • Data table
      • Index table
    • Lists
      • Action list
      • Description list
      • List
      • Listbox
      • Option list
      • Resource item
      • Resource list
    • Navigation
      • Footer help
      • Fullscreen bar
      • Legacy tabs
        Legacy
      • Link
      • Navigation
      • Pagination
      • Tabs
      • Top bar
    • Overlays
      • Modal
      • Popover
      • Tooltip
    • Utilities
      • App provider
      • Collapsible
      • Frame
      • Scrollable
    • Deprecated
      • Caption
        Deprecated
      • Card
        Deprecated
      • Display text
        Deprecated
      • Grid
        Deprecated
      • Heading
        Deprecated
      • Setting toggle
        Deprecated
      • Sheet
        Deprecated
      • Stack
        Deprecated
      • Subheading
        Deprecated
      • Text container
        Deprecated
      • Text style
        Deprecated
      • Visually hidden
        Deprecated
  • Tokens
  • Icons
  • Contributing
  • Tools
  • Home
  • Components
  • Overlays

Overlays

  • Screenshot of the modal component

    Modal

    Modals are overlays that require merchants to take an action before they can continue interacting with the rest of Shopify. They can be disruptive and should be used thoughtfully and sparingly.

  • Screenshot of the popover component

    Popover

    Popovers are small overlays that open on demand. They let merchants access additional content and actions without cluttering the page.

  • Screenshot of the tooltip component

    Tooltip

    Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.

Leave feedback