Tabs Component
Five style variants in horizontal and vertical orientations with sm/md sizes.
Button brand
Filled brand pill for the active tab
Horizontal — Small
Horizontal — Medium — Full Width
Vertical — Medium
razor
<Tabs Type="button-brand"
Orientation="horizontal"
Size="md"
ActiveTab="@activeTab"
ActiveTabChanged="OnTabChanged"
Items="tabItems" />
@@code {
private string activeTab = "my-details";
private Task OnTabChanged(string key)
{
activeTab = key;
return Task.CompletedTask;
}
private List<Tabs.TabItem> tabItems = new()
{
new() { Key = "my-details", Label = "My details" },
new() { Key = "profile", Label = "Profile" },
new() { Key = "password", Label = "Password" },
new() { Key = "team", Label = "Team", Badge = "2" },
};
}Button gray
Subtle gray background on active
Horizontal — Medium
Vertical — Small
razor
<Tabs Type="button-gray"
Orientation="horizontal"
Size="md"
ActiveTab="@activeTab"
ActiveTabChanged="OnTabChanged"
Items="tabItems" />
@@code {
private string activeTab = "my-details";
private Task OnTabChanged(string key)
{
activeTab = key;
return Task.CompletedTask;
}
private List<Tabs.TabItem> tabItems = new()
{
new() { Key = "my-details", Label = "My details" },
new() { Key = "profile", Label = "Profile" },
new() { Key = "password", Label = "Password" },
new() { Key = "team", Label = "Team", Badge = "2" },
};
}Underline
Bottom-border accent for the active tab
Horizontal — Medium
Horizontal — Small — Full Width
razor
<Tabs Type="underline"
Orientation="horizontal"
Size="md"
ActiveTab="@activeTab"
ActiveTabChanged="OnTabChanged"
Items="tabItems" />
@@code {
private string activeTab = "my-details";
private Task OnTabChanged(string key)
{
activeTab = key;
return Task.CompletedTask;
}
private List<Tabs.TabItem> tabItems = new()
{
new() { Key = "my-details", Label = "My details" },
new() { Key = "profile", Label = "Profile" },
new() { Key = "password", Label = "Password" },
new() { Key = "team", Label = "Team", Badge = "2" },
};
}Button border
Outlined box around the active tab
Horizontal — Medium
razor
<Tabs Type="button-border"
Orientation="horizontal"
Size="md"
ActiveTab="@activeTab"
ActiveTabChanged="OnTabChanged"
Items="tabItems" />
@@code {
private string activeTab = "my-details";
private Task OnTabChanged(string key)
{
activeTab = key;
return Task.CompletedTask;
}
private List<Tabs.TabItem> tabItems = new()
{
new() { Key = "my-details", Label = "My details" },
new() { Key = "profile", Label = "Profile" },
new() { Key = "password", Label = "Password" },
new() { Key = "team", Label = "Team", Badge = "2" },
};
}Button minimal
Quiet underline-less treatment
Horizontal — Medium
razor
<Tabs Type="button-minimal"
Orientation="horizontal"
Size="md"
ActiveTab="@activeTab"
ActiveTabChanged="OnTabChanged"
Items="tabItems" />
@@code {
private string activeTab = "my-details";
private Task OnTabChanged(string key)
{
activeTab = key;
return Task.CompletedTask;
}
private List<Tabs.TabItem> tabItems = new()
{
new() { Key = "my-details", Label = "My details" },
new() { Key = "profile", Label = "Profile" },
new() { Key = "password", Label = "Password" },
new() { Key = "team", Label = "Team", Badge = "2" },
};
}