Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Blogs
All blogsPageHeader
Designer doc
PageHeader component.
Example
Basic Usage
View code
With Subtitle
View code
With Customized Title and Subtitle
Title and subtitle can be customized by using React element instead of normal string.
View code
With Back Button
View code
With Component Children
Component children will appear on the right of the title/subtitle element.
View code
View code
Text Overflow Behaviour
View code
API
PageHeader
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| backButton | ReactElement<any, string | JSXElementConstructor<any>> | ||
| backButtonContainerProps | StyledProps<HTMLDivElement> | ||
| pageHeaderTextGroupProps | StyledProps<HTMLDivElement> | ||
| pageSubtitleProps | StyledProps<HTMLHeadingElement> | ||
| pageTitleContainerProps | StyledProps<HTMLDivElement> | ||
| pageTitleProps | StyledProps<HTMLHeadingElement> | ||
| subtitle | ReactNode | ||
| title | ReactNode |