Deprecated components will be removed in future major versions of Polaris. These components could be deprecated for a number of reasons and should be avoided. These components will show warnings in the component file and provide details for alternative usage. For more information, check out the component lifecycles.
Caption text size is smaller than the recommended size for general reading. On web, it should be used only in a graph or as a timestamp for a list item. On Android and iOS, it can also be used as help text or as other kinds of secondary text for list items.
Cards are used to group similar concepts and tasks together to make Shopify easier for merchants to scan, read, and get things done.
Display styles make a bold visual statement. Use them to create impact when the main goal is visual storytelling. For example, use display text to convince or reassure merchants such as in marketing content or to capture attention during onboarding.
Create complex layouts based on CSS Grid.
Headings are used as the titles of each major section of a page in the interface. For example, card components generally use headings as their title.
Use to give merchants control over a feature or option that can be turned on or off.
A sheet is a large container that enters from the edge of the screen when triggered by the merchant. It’s used to provide merchants with actions and information contextual to the page. It doesn’t interrupt their flow like a modal.
Use to lay out a horizontal row of components or to achieve no-fuss vertical centering. A stack is made of flexible items that wrap each of the stack’s children. Options provide control of the wrapping, spacing, and relative size of the items in the stack.
Subheadings are used for the title of any sub-sections in top-level page sections.
A text container is used to wrap text elements such as paragraphs, headings, and lists to give them vertical spacing.
Text style enhances text with additional visual meaning. For example, using subdued text to de-emphasize it from its surrounding text.
Use when an element needs to be available to assistive technology (for example, a screen reader) but otherwise hidden.