Back to Primitives

Page

1:1Layout
View on GitHub

Top-level page wrapper.

Example
Page content goes here.
Usage
import { Page } from '@/components/polaris';

function Example() {
    return (
        <Page>
            <p>Page content goes here.</p>
        </Page>
    );
}
Component Source
import { forwardRef, createElement } from 'react';
import type { JSX } from 'react';

export type PageProps = JSX.IntrinsicElements['s-page'];

/**
 * Page component - top-level layout wrapper for admin pages.
 *
 *
 * @example
 * <Page title="Products">
 *   <Section>Content here</Section>
 * </Page>
 */
export const Page = forwardRef<HTMLElement, PageProps>(({ children, ...props }, ref) => {
    return createElement('s-page', { ref, ...props }, children);
});

Page.displayName = 'Page';