You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Page header

A page header informs a user of the section of the product they are currently in. It includes a breadcrumb and optional tabs.

View source

1
import {BasicHeader} from '@coveord/plasma-react';
2

3
export default () => (
4
    <BasicHeader
5
        title={{
6
            text: 'Charmeleon title',
7
        }}
8
        description="Simple description for the title"
9
        tabs={[
10
            {groupId: 'example1', id: 'tab1', title: 'Digimon'},
11
            {groupId: 'example1', id: 'tab2', title: 'Beyblade'},
12
            {groupId: 'example1', id: 'tab3', title: 'Pokemon'},
13
        ]}
14
    />
15
);

Props

Name	Type	Default	Description
`title`required	`ITitleProps`		The title of the header
`actions`	`IContentProps[]`		Action buttons displayed in the right portion of the header
`children`	`ReactNode`
`classes`	`string[]`		Additional CSS classes to set on the HeaderWrapper element
`description`	`ReactNode`		Text that appears above the tabs in the header wrapper
`hasBorderBottom`	`boolean`	`true`	Whether the header displays a border on the bottom
`hasPadding`	`boolean`	`true`	Whether the header has padding
`tabs`	`ITabProps[]`		Array of tabs, see Tab Component for details

Examples

Loading

1
import {BasicHeaderLoading} from '@coveord/plasma-react';
2

3
export default () => <BasicHeaderLoading />;

No guidelines exist for BasicHeader yet.

Create guidelines