Section headers

Names a region of a screen: SectionHeader’s five parts over a divider, and SectionLabel, its smaller sibling for one row of a form.

Demo

hero

Team members

Manage your team members and their account permissions here.

Component
Actions
import { Button } from "@/components/base/buttons/button"; import { Dropdown } from "@/components/base/dropdown/dropdown"; import { SectionHeader } from "@/components/application/section-headers/section-headers"; <SectionHeader.Root> <SectionHeader.Group> <div className="flex flex-1 flex-col gap-0.5"> <SectionHeader.Heading>Team members</SectionHeader.Heading> <SectionHeader.Subheading> Manage your team members and their account permissions here. </SectionHeader.Subheading> </div> <SectionHeader.Actions> <Button color="secondary" size="sm">Cancel</Button> <Button size="sm">Add member</Button> </SectionHeader.Actions> <Dropdown.Root> <Dropdown.DotsButton aria-label="Team members menu" className="max-md:absolute max-md:top-0 max-md:right-0 md:mt-2" /> <Dropdown.Popover> <Dropdown.Menu> <Dropdown.Item id="rename" label="Rename section" /> <Dropdown.Item id="export" label="Export list" /> <Dropdown.Item id="archive" label="Archive" /> </Dropdown.Menu> </Dropdown.Popover> </Dropdown.Root> </SectionHeader.Group> </SectionHeader.Root>

In context

in-context
View in a page

Family

family

Notifications

SectionHeader

Your photo (required)

This will be displayed on your profile.

SectionLabel

Types

cells

The sheet’s Type axis, in the Actions slot.

Team members

Manage your team members and their account permissions here.

Buttons

Team members

Manage your team members and their account permissions here.

Search

Team members

Manage your team members and their account permissions here.

Button group

Sizes

cells

Your photo (required)

This will be displayed on your profile.

size sm

Your photo (required)

This will be displayed on your profile.

size md

Layouts

cells

The header

Team members

Manage your team members and their account permissions here.

the dots menu, last in the row

Team members

Manage your team members and their account permissions here.

tabs under the row, above the divider

Notifications

heading only, centred on the actions row

Team members

Manage your team members and their account permissions here.

no actions: the text block over the divider

The label

Your photo

This will be displayed on your profile.

w-80 flex row: the label keeps its minimum width

Company logo

Update your company logo, then choose where to display it.

flex row, a w-70 label column

Content

cells

The label

Your photo

This will be displayed on your profile.

title and description

Your photo (required)

This will be displayed on your profile.

isRequired

Your photo

This will be displayed on your profile.

tooltip

Your photo

This will be displayed on your profile.

tooltip and tooltipDescription

Your photo

This will be displayed on your profile.

actions

Company logo

title only

The header

Team members, roles, and pending invitations across every workspace

Manage your team members and their account permissions here.

a long heading wraps beside the actions

Team members

Manage who can see and edit this workspace, which roles they hold, who is still waiting on an invitation, and when their access is reviewed.

long supporting text wraps under the heading

Behaviour

cells

Below md, in real viewports: the content row stacks.

Below md

buttons: stacked, the dots pinned top right
search: the field takes the column, no shortcut chip
button group: stacked, the dots pinned top right
tabs: the bar scrolls sideways

Loading

cells

Types

Loading team members
buttons, actions real
Loading members
search, field real
Loading members by role
button group, segments real

The header

Loading team
tabs real, under the header
Loading team members
dots menu real, beside the buttons
Loading team members
divider off

States

cells

Your photo

This will be displayed on your profile.

help button: hover and focus, live

Your photo (required)

This will be displayed on your profile.

required: the asterisk after the title