Filter Buttons

A horizontally scrollable set of filter buttons with an active state indicator and an 'Add More' button. Perfect for content filtering interfaces.

Usage

import { useState } from 'react';
import FilterButtons from '@/components/FilterButtons';

export default function MyPage() {
  const [activeFilter, setActiveFilter] = useState('All');
  const filters = ['All', 'Products', 'Services', 'Resources', 'Blog'];
  
  const handleFilterChange = (filter: string) => {
    setActiveFilter(filter);
    console.log('Selected filter:', filter);
  };

  return (
    <FilterButtons 
      filters={filters}
      activeFilter={activeFilter}
      onFilterChange={handleFilterChange}
    />
  );
}

Examples

Basic Filter Buttons

A simple filter buttons component with a default active selection.

const [activeFilter, setActiveFilter] = useState('Software');

<FilterButtons 
  filters={['Software', 'Hardware', 'Design', 'Marketing']}
  activeFilter={activeFilter}
  onFilterChange={setActiveFilter}
/>

Multiple Filter Options

Filter buttons with more options to demonstrate horizontal scrolling.

const [activeFilter, setActiveFilter] = useState('All');

<FilterButtons 
  filters={['All', 'Products', 'Services', 'Resources', 'Blog', 'About', 'Contact']}
  activeFilter={activeFilter}
  onFilterChange={setActiveFilter}
/>