Page

Deprecated

The Page component is deprecated and will be removed in a future release. Please use PageLayout instead.

The Page component provides the basic layout for your app with slots for a header, sidebar, main content, and a detail view. The Main slot is the only slot that is mandatory for rendering the Page; every other slot is optional.

Check out the UI and design guidelines for more information on how to structure your app using the page.

OverviewPropertiesUsage

PageProps

Deprecated

The Page component is deprecated and will be removed in a future release. Please use PageLayout instead.

extends, <<>, keyof >, , , ,

Name	Type	Default	Description
disableAnimations?		false	Whether animations should be disabled. If true or 'prefers-reduced-motion' is set to 'reduce', no animations are applied.

Page.Header

The Page.Header is rendered at the very top of the page. Take a look at the UI and design guidelines for information on which components we recommend to use in the header.

HeaderProps

Deprecated

Deprecated along with the Page component. Please use PageLayout.Header instead.

extends, <<>, keyof >, ,

Page.Sidebar

The Page.Sidebar is the first slot of the page you can use to display content. Take a look at the UI and design guidelines for information on which content we recommend to use in the sidebar.

SidebarProps

Signature:

export declare type SidebarProps = | ;

Page.Main

You should use the Page.Main compound to display the main content of your application. Take a look at the UI and design guidelines for information on which content we recommend to use in the main view.

MainProps

Deprecated

Deprecated along with the Page component. Please use PageLayout.Content instead.

extends, , , <<>, keyof >

Name	Type	Default	Description
minWidth?		320	The minimum width of the main panel in pixels.

Page.DetailView

The Page.DetailView can be leveraged to provide additional information related to the main content. Take a look at the UI and design guidelines for information on which content we recommend to use in the detail view.

DetailViewProps

Signature:

export declare type DetailViewProps = | ;

Page.PanelControlButton

The Page.PanelControlButton updates the dismissed state of an uncontrolled panel. The button automatically renders the correct icons depending on the panel state.

PanelControlButtonProps

Deprecated

Deprecated along with the Page component and will be removed in a future release.

extends<<>, | | >

Name	Type	Default	Description
action?	| |		The action triggered by the button.
target?	|		The target panel controlled by the button.