Plasma Design System
Home
Brand
Design principles
Foundations
Iconography
Colors
Layout
Header
Table
Modal
ModalWizard
Sticky footer
Form
Button
Code editor
Collection
Legacy documentation

Layout

Header

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

View source

One
Two
Three

The header description
1
import {Button, Header} from '@coveord/plasma-mantine';
2
3
export default () => (
4
<Header
5
description="The header description"
6
docLink="https://about:blank"
7
docLinkTooltipLabel="Tooltip text"
8
borderBottom
9
actions={
10
<>
11
<Button variant="outline">Action 2</Button>
12
<Button>Action 1</Button>
13
</>
14
}
15
>
16
<span>One</span>
17
<span>Two</span>
18
<span>Three</span>
19
</Header>
20
);

Props

NameTypeDefaultDescription
childrenrequiredReactNode
The title of the header. If more than one children are provided, each of them act as parts of a breadcrumb
actionsReactNode
Action buttons that can be displayed on the right of the header
borderBottomboolean
Whether the header should have a border on the bottom
descriptionReactNode
The description text displayed inside the header underneath the title
docLinkstring
A href pointing to documentation related to the current panel. When provided, an info icon is rendered next to the title as link to this documentation
docLinkTooltipLabelstring
The tooltip text shown when hovering over the doc link icon

No guidelines exist for Header yet.

Create guidelines