FilterTabButton

A tab-style button used for filtering content by category. Displays an active/inactive state, supports optional item counts and leading icons. Commonly used in groups to form a filter tab bar.

Import

import { FilterTabButton } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

const filters = ['all', 'active', 'completed', 'cancelled'];
 
<div className="flex gap-1">
  {filters.map((f) => (
    <FilterTabButton
      key={f}
      label={f.charAt(0).toUpperCase() + f.slice(1)}
      count={counts[f]}
      isActive={activeFilter === f}
      onClick={() => setActiveFilter(f)}
    />
  ))}
</div>

Props

Prop	Type	Default	Description
`label`*	string	-	Display label for the tab.
`isActive`*	boolean	-	Whether this tab is currently active.
`onClick`*	() => void	-	Click handler for the tab.
`count`	number	-	Optional count displayed next to the label.
`icon`	ReactNode	-	Optional icon displayed before the label.
`className`	string	-	Additional CSS classes.