Infa.ai
Polaris Design SystemComponents
Components
Popover
Small overlays that open on demand and close when the merchant interacts with any other part of Shopify. Used to surface secondary information or actions.
Pagination
Use pagination to let merchants move through an ordered collection of items that has been split into pages. On the web, pagination uses buttons to move back and forth between pages. On iOS and Android, pagination uses infinite scrolling.
Tabs
Used to alternate among related views within the same context.
Scrollable
Used in components with too much content for the available vertical space. Embeds long-form content in components like modals and popovers.
Collapsible
Hides content and allows merchants to expand it. Used to hide optional settings, information, and actions.
Legacy tabs
Used to alternate among related views within the same context.
Loading
Used to indicate to merchants that a page is loading or an upload is processing.
Legacy stack
Legacy version of the Stack component. Used for layout of a horizontal row of components or vertical centering.
Frame
Creates the structure of the Shopify admin. All of the main sections of the admin are nested in the frame.
Modal
Used to interrupt merchants with urgent information, details, or actions.
Contextual Save Bar [To Discuss]
Not available within DS yet
Component on New Page Button
Used primarily for actions like 'Add', 'Close', 'Cancel', or 'Save'. Plain buttons are used for less important actions.
All Secondary Buttons 
Divider
Use to separate or group content.
Bleed
Applies negative margin to a layout, extending it to the edge of the screen on small screens.
Card
Used to group similar concepts and tasks together for easier scanning and reading.
Account connection
Used for connecting or disconnecting a store to various accounts, like Facebook for the sales channel.
Page actions
Allows merchants to take key actions at the bottom of specific pages in the interface.
Callout card
Callout cards are used to encourage merchants to take an action related to a new feature or opportunity. They are most commonly displayed in the sales channels section of Shopify.
Block stack
Use to display children vertically and horizontally with full width by default. Based on CSS Flexbox.
Box
Box is the most primitive layout component. It’s a way to access Polaris design tokens.
Button group
Displays multiple related actions stacked or in a horizontal row for arrangement and spacing.
Paging Controls Button Groups 
Empty state
Empty states are used when a list, table, or chart has no items or data to show. This is an opportunity to provide explanation or guidance to help merchants progress. The empty state component is intended for use when a full page in the admin is empty, and not for individual elements or areas in the interface.
Inline grid
Use to lay out children horizontally with equal gap between columns. Based on CSS Grid.
Page
Used to build the layout of a page in the Shopify admin. A flexible container for composing pages consistently.
Layout
A structural component used to group other components. Creates consistent spacing and helps layout stack and scale responsively.
Autocomplete
The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. It's a convenience wrapper around the Combobox and Listbox components with minor UI differences.
Form layout
Manages the layout of all forms and fields within it. Used for the layout of new forms and managing the layout of all forms.
Grid
Create complex layouts based on CSS Grid.
Media card
Provides a container for introductory or highlight information. Often used in a grid to present related content.
Inline stack
Use to display children horizontally in a row. Based on CSS Flexbox.
Checkbox
Checkboxes are most commonly used to give merchants a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have merchants indicate they agree to specific terms and services.
Disabled Checkboxes Color picker
Allows merchants to choose a color visually, or by entering a hex value.
Combobox
Combobox is an accessible autocomplete input that enables merchants to filter a list of options and select one or more values.
Index filters
Use index filters to allow merchants to filter, search, and sort their index table data and create unique saved views from the results.
Choice list
A choice list lets you create a list of grouped radio buttons or checkboxes. Use this component if you need to group together a related list of interactive choices.
Inline error
Inline errors are brief, in-context messages that tell merchants something went wrong with a single or group of inputs in a form. Use inline errors to help merchants understand why a form input may not be valid and how to fix it.
Date picker
Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.
Drop zone
The drop zone component lets users upload files by dragging and dropping the files into an area on a page, or activating a button.
Filters
A composite component that filters the items of a list or table.
Radio button
Use radio buttons to present each item in a list of options where merchants must make a single selection.
Text field
A text field is an input field that merchants can type into. It has a range of options and supports several text formats including numbers.
Range slider
A range slider is an input field that merchants can use to select a numeric value within a given range (minimum and maximum values).
Form
A wrapper component that handles the submission of forms.
Select
Select lets merchants choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.
Keyboard key
Used to educate merchants about keyboard shortcuts.
Avatar
Used to show a thumbnail representation of an individual or business in the interface.
All Avatars Badge
Used to inform merchants of the tone of an object or an action taken.
Tag
Tags represent a set of interactive, merchant-supplied keywords that help label, organize, and categorize objects. Tags can be added or removed from an object by merchants.
Thumbnail
Used as a visual anchor and identifier for an object, along with text to provide context.
Video thumbnail
A clickable placeholder image that opens a video player within a modal or full screen when clicked.
Icon
Used to visually communicate core parts of the product and available actions, acting as wayfinding tools.
Exception list
Helps merchants notice important, standout information that adds extra context to a task.
Skeleton body text
Provides a low fidelity representation of content before it appears, improving perceived load times.
Banner
Informs merchants about important changes or persistent conditions in a prominent way.
Progress bar
Used to visually represent the completion of a task or operation.
Skeleton tabs
Provides a low fidelity representation of content before it appears, improving perceived load times.
Skeleton display text
Provides a low fidelity representation of content before it appears, improving perceived load times.
Spinner
Used to notify merchants that their action is being processed. Used for content that can’t be represented with skeleton loading components.
Skeleton page
Used with other skeleton loading components to provide a low fidelity representation of the UI before content appears.
Text
Typography helps establish hierarchy and communicate important content by creating clear visual patterns.
Skeleton thumbnail
Provides a low fidelity representation of an image before it appears, improving perceived load times.
Index table
An index table displays a collection of objects of the same type, like orders or products. The main job of an index table is to help merchants get an at-a-glance of the objects to perform actions or navigate to a full-page representation of it.
Option list
The option list component lets you create a list of grouped items that merchants can pick from. This can include single selection or multiple selection of options. Option list usually appears in a popover, and sometimes in a modal or a sidebar. Option lists are styled differently than choice lists and should not be used within a form, but as a standalone menu.
Action list
Action lists render a list of actions or selectable options. This component is usually placed inside a popover container to create a dropdown menu or to let merchants select from a list of options.
Listbox
A Listbox is a vertical list of interactive options, with room for icons, descriptions, and other elements.
Data table
Used to organize and display all information from a data set. Aimed to be as simple as possible for merchants.
Resource item
Resource items represent specific objects within a collection, such as products or orders. They provide contextual information on the resource type and link to the object’s detail page.
Footer help
Footer help is used to refer merchants to more information related to the product or feature they’re using.
Description list
Used to present pairs of related information, like terms and definitions, or names and values, in a list format.
List
Lists display a set of related text-only content. Each list item begins with a bullet or a number.
Resource list
A resource list displays a collection of objects of the same type, like products or customers. The main job of a resource list is to help merchants find an object and navigate to a full-page representation of it.
Fullscreen bar
The Fullscreen bar is a header component that should be presented at the top of an app when it is in fullscreen mode. This is designed to ensure a uniform placement for a button to exit that mode. The Fullscreen bar can be customized by adding children.
Link
Links take users to another place, and usually appear within or directly following a sentence.
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.
