Tabs Component

Horizontal — Small

Horizontal — Medium — Full Width

Vertical — Medium

<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" },
    };
}

Horizontal — Medium

Vertical — Small

<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" },
    };
}

Horizontal — Medium

Horizontal — Small — Full Width

<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" },
    };
}

Horizontal — Medium

<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" },
    };
}

Horizontal — Medium

<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" },
    };
}

Tabs Component

Button brand

Button gray

Underline

Button border

Button minimal