Tabs: Icons and counts

Put icons and badges inside triggers.

import { IconCode, IconGitPullRequest, IconMessage } from "@tabler/icons-react"

import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function TabsIcons() {
  return (
    <Tabs defaultValue="code">
      <TabsList variant="line">
        <TabsTrigger value="code">
          <IconCode />
          Code
        </TabsTrigger>
        <TabsTrigger value="pulls">
          <IconGitPullRequest />
          Pull requests
          <Badge>12</Badge>
        </TabsTrigger>
        <TabsTrigger value="discussions">
          <IconMessage />
          Discussions
        </TabsTrigger>
      </TabsList>
    </Tabs>
  )
}

Add this example

This adds the example as components/examples/tabs/icons.tsx, together with the Tabs component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/tabs-icons.json

To add only the component, follow the Tabs installation.

Props in this example

The Tabs props this example sets, from the API reference.

Tabs

Prop	Type	Default
`defaultValue`	`any`	`0`

TabsList

Prop	Type	Default
`variant`	`"default" \| "line"`	`"default"`

TabsTrigger

Prop	Type	Default
`value`	`any`	`–`

Every prop is in the Tabs API reference.

More Tabs examples

See them all, with keyboard support and accessibility notes, on the Tabs page.