Gumtree UI

RepoTabs

A horizontal tab bar with Phosphor icons and optional count badges for repository sections.

Import

import { RepoTabs } from "@gumtree/ui/forge/RepoTabs";

Props

PropTypeDefaultDescription
tabs*RepoTab[]-Array of tab definitions with label, icon, count, active state

Examples

With Counts

Tabs showing section counts and an alert badge.

CodeIssues7PRs3CIChat3Settings
<RepoTabs
  tabs={[
    { label: "Code", icon: "code", active: true },
    { label: "Issues", icon: "bug", count: 7 },
    { label: "PRs", icon: "git-pull-request", count: 3 },
    { label: "CI", icon: "pipe" },
    { label: "Chat", icon: "chat-dots", count: 3, countAlert: true },
    { label: "Settings", icon: "gear" },
  ]}
/>

Simple Tabs

Tabs without counts or icons.

CodeIssuesSettings
<RepoTabs
  tabs={[
    { label: "Code", active: true },
    { label: "Issues" },
    { label: "Settings" },
  ]}
/>