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 | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| errorComponent | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| hasError | boolean | ||
| isLoading | boolean | ||
| skeleton | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> |
PageHeader#
| Prop | Type | Default | Description |
|---|---|---|---|
| description | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| footer | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| nav | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| title | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| toolbar | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> |
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?