Section Header Component
Section-level header with title, supporting text, action buttons, tabs, and divider.
With buttons
Four trailing action buttons
Team members
Manage your team members and their account permissions here.
razor
<SectionHeader Title="Team members"
SupportingText="Manage your team members and their account permissions here."
ShowDropdownIcon="true">
<Actions>
<Button Variant="tertiary" Text="Tertiary" />
<Button Variant="secondary" Text="Secondary" />
<Button Variant="primary" Text="Primary" />
</Actions>
</SectionHeader>With search
Search input in the action slot
Team members
Manage your team members and their account permissions here.
razor
<SectionHeader Title="Team members"
SupportingText="Manage your team members and their account permissions here.">
<Actions>
<InputField Placeholder="Search">
<LeadingIcon><svg>...search icon...</svg></LeadingIcon>
</InputField>
</Actions>
</SectionHeader>With button group
Segmented filter bar
Team members
Manage your team members and their account permissions here.
razor
<SectionHeader Title="Team members"
SupportingText="..."
ShowDropdownIcon="true">
<Actions>
<ButtonGroup Items="bgItems" @bind-SelectedValue="bgSelected" />
</Actions>
</SectionHeader>With buttons + tabs
Tab bar integrated beneath the title
Team members
Manage your team members and their account permissions here.
razor
<SectionHeader Title="Team members"
SupportingText="..."
Tabs="settingsTabs"
@bind-ActiveTab="activeTab">
<Actions>
<Button Variant="primary" Text="Primary" />
</Actions>
</SectionHeader>
@code {
private string activeTab = "my-details";
private List<SectionHeader.SectionTab> settingsTabs = new()
{
new() { Label = "My details", Value = "my-details" },
new() { Label = "Profile", Value = "profile" },
new() { Label = "Password", Value = "password" },
};
}Minimal (title only)
Just the title + divider
Team members
razor
<SectionHeader Title="Team members" />No divider
Without the bottom rule
Team members
Manage your team members and their account permissions here.
razor
<SectionHeader Title="Team members"
SupportingText="Manage your team members here."
ShowDivider="false">
<Actions>
<Button Variant="primary" Text="Save changes" />
</Actions>
</SectionHeader>