Page
Page makes it easy to implement consistent page layouts throughout your app.
Props#
The Page
component and all sub components accept all Box
properties.
Page#
Prop | Type | Default | Description |
---|---|---|---|
children | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | ||
errorComponent | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | ||
hasError | boolean | ||
isLoading | boolean | ||
skeleton | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode |
PageHeader#
Prop | Type | Default | Description |
---|---|---|---|
description | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | ||
footer | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | ||
nav | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | ||
title | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | ||
toolbar | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode |
PageBody#
Prop | Type | Default | Description |
---|---|---|---|
contentProps | HTMLChakraProps<"div"> | ||
contentWidth | ResponsiveValue<number | "px" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | ... 62 more ... | "container.2xl"> |
BackButton#
Prop | Type | Default | Description |
---|---|---|---|
aria-label | string | ||
href | string | object | ||
icon | ReactElement<any, string | JSXElementConstructor<any>> | The icon to be used in the button. | |
isActive | boolean | false | If true , the button will be styled in its active state. |
isDisabled | boolean | false | If true , the button will be disabled. |
isLoading | boolean | false | If true , the button will show a spinner. |
isRound | boolean | false | If true , the button will be perfectly round. Else, it'll be slightly round |
spinner | ReactElement<any, string | JSXElementConstructor<any>> | Replace the spinner component when isLoading is set to true |
Was this helpful?