API Reference octantis v0.2.0

The entrypoint for defining your web interface, such as controllers, components, channels, and so on.

These components provide an interface for Shopify AppBridge

Renders Shopify toast notices.

Renders the AppBridge navigation menu <ui-nav-menu/>. This adds navigation elements for your app in the Shopify side bar.

The stylesheet to make polaris work.

Interactions with components.

These components are an implementation of the Shopify Polaris design system. Style attributes are taken from Polaris Tokens.

The AppBridge Modal API allows you to display an overlay that prevents interaction with the rest of the app until dismissed.

Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style.

Use to convey general information or actions that aren’t critical. For example, you might show a banner that asks for merchant feedback. Default banners contain lower priority information and should always be dismissible.

Applies negative margin to allow content to bleed out into the surrounding layout.

Use to display children vertically and horizontally with full width by default. Based on CSS Flexbox.

Box is the most primitive layout component.

Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style.

Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style.

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.

Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style.

Skeleton display text is used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by merchants. Can be used for content in or outside of a card.

Consumed by Checkbox and Radio button. Undocumented by Shopify.

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.

The collapsible component is used to put long sections of information under a block that merchants can expand or collapse.

Complex actions are an implied component in Polaris... Usually it is a button.

Use to separate or group content.

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.

Filters is a composite component that filters the items of a list or table.

The struct for holding a filter.

Choices for filters

Create complex layouts based on CSS Grid.

Icons are used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help merchants more easily understand where they are in the product, and common interaction patterns that are available.

Selected Polaris Icons. Used with PolarisComponents.Icon

Just an image.

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.

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.

Use to lay out children horizontally with equal gap between columns. Based on CSS Grid.

Use to display children horizontally in a row. Based on CSS Flexbox.

Skeleton display text is used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by merchants. Can be used for content in or outside of a card.

Media cards provide a consistent layout to present visual information to merchants. Visual media is used to provide additional context to the written information it's paired with.

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.

Use to build the outer wrapper of a page, including the page title and associated actions.

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.

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

Use radio buttons to present each item in a list of options where merchants must make a single selection.

Select lets merchants choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.

A building block for other components such as Card

Skeleton display text is used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by merchants. Can be used for content in or outside of a card.

Skeleton display text is used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by merchants. Can be used for content in or outside of a card.

Skeleton thumbnail is used to provide a low fidelity representation of an image before it appears on the page, and improves load times perceived by merchants. Use for thumbnails in or outside of a card.

Spinners are used to notify merchants that their action is being processed. For loading states, spinners should only be used for content that can’t be represented with skeleton loading components, like for data charts.

Use to alternate among related views within the same context.

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.

Typography helps establish hierarchy and communicate important content by creating clear visual patterns.

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.

Use thumbnails as a visual anchor and identifier for an object. They should be used along with text to provide context.

Captures the Polaris Border Tokens. Allows enforcing of component attributes

Captures the Polaris Color Tokens. Allows enforcing of component attributes

Captures the Polaris Shaddow Tokens. Allows enforcing of component attributes

Captures the Polaris Space Tokens. Allows enforcing of component attributes

Underlying button. Button is implemented with this and sometimes Polaris uses this directly instead of button

Inform users about the status of an object or indicate that an action has been completed.

Highlights important information or required actions prominently within the interface. Use to communicate statuses, provide feedback, or draw attention to critical updates.

A generic container that provides a flexible alternative for custom designs not achievable with existing components. Use it to apply styling such as backgrounds, padding, or borders, or to nest and group other components. The contents of Box always maintain their natural size, making it especially useful within layout components that would otherwise stretch their children.

Triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages. Use Button to let users perform specific tasks or initiate interactions throughout the interface. Buttons can also function as links, guiding users to internal or external destinations.

Displays multiple buttons in a layout.

A generic interactive container component that provides a flexible alternative for custom interactive elements not achievable with existing components like Button or Link. Use it to apply specific styling such as backgrounds, padding, or borders.

Create clear visual separation between elements in your user interface.

Use s-grid to organize your content in a matrix of rows and columns and make responsive layouts for pages. Grid follows the same pattern as the CSS grid layout.

Display content within a single item of a grid layout.

Renders hierarchical titles to communicate the structure and organization of page content. Heading levels adjust automatically based on nesting within parent Section components, ensuring a meaningful and accessible page outline.

Renders a graphic symbol to visually communicate core parts of the product and available actions. Icons can act as wayfinding tools to help users quickly understand their location within the interface and common interaction patterns.

Embeds an image within the interface and controls its presentation. Use to visually illustrate concepts, showcase products, or support user tasks and interactions.

Makes text interactive, allowing users to navigate to other pages or perform specific actions. Supports standard URLs, custom protocols, and navigation within Shopify or app pages.

Represents a single item within an unordered or ordered list. Use only as a child of s-unordered-list or s-ordered-list components.

Use Menu to display a list of actions that can be performed on a resource.

Displays content in an overlay. Use to create a distraction-free experience such as a confirmation dialog or a settings panel.

Displays a numbered list of related items in a specific sequence. Use to present step-by-step instructions, ranked items, or procedures where order matters.

Use s-page as the main container for placing content in your app. Page comes with preset layouts and automatically adds spacing between elements.

Displays a block of text and can contain inline elements such as buttons, links, or emphasized text. Use to present standalone blocks of content as opposed to inline text.

Popover is used to display content in an overlay that can be triggered by a button.

Use to define an element as a containment context, enabling child components or styles to adapt based on the container’s size.

Let users enter search terms or find specific items using a single-line input field.

Groups related content into clearly-defined thematic areas. Sections have contextual styling that automatically adapts based on nesting depth. They also adjust heading levels to maintain a meaningful and accessible page structure.

Allow users to pick one option from a menu. Ideal when presenting four or more choices to keep interfaces uncluttered.

Displays an animated indicator showing users that content or actions are loading. Use to communicate ongoing processes, such as fetching data from a server. For loading states on buttons, use the “loading” property on the Button component instead.

Organizes elements horizontally or vertically along the block or inline axis. Use to structure layouts, group related components, or control spacing between elements.

Display data clearly in rows and columns, helping users view, analyze, and compare information. Automatically renders as a list on small screens and a table on large ones.

Define the main content area of a table, containing rows and cells that display data.

Display data within a cell in a table row.

Display column names at the top of a table.

Define a header row in a table, displaying column names and enabling sorting.

Display a row of data within the body of a table.

Displays inline text with specific visual styles or tones. Use to emphasize or differentiate words or phrases within a Paragraph or other block-level components.

Displays helpful information in a small overlay when users hover or focus on an element. Use to provide additional context without cluttering the interface.

Displays a bulleted list of related items. Use to present collections of items or options where the sequence isn’t critical.

Enumerations of types commonly found in Polaris

Core Functionality for Polaris Components.

Core Functionality for Polaris Web Components.

Storybook Modle to Power PhoenixStorybook

We cannot pass in requires to Storybook, so we do not have access to sigils.

Create Storybook stories with the Polaris style sheet loaded in.