A customizable header button component designed for navigation bars and toolbars with active state management and consistent styling. ## Key Components - **`HeaderButton`** - Main button component with icon support and active state styling - **`HeaderButtonProps`** - TypeScript interface extending HTML button attributes with: - `isActive` - Controls active/pressed visual state - `icon` - React node for button icon content - `className` - Additional CSS classes for customization ## Usage Example ```typescript import { HeaderButton } from './components/header-button' import { MenuIcon, SearchIcon } from 'lucide-react' function AppHeader() { const [activeButton, setActiveButton] = useState('menu') return (

} isActive={activeButton === 'menu'} onClick={() => setActiveButton('menu')} aria-label="Open menu" /> } isActive={activeButton === 'search'} onClick={() => setActiveButton('search')} className="ml-2" />

) } ``` The component uses OpenFrame's design system tokens (`ods-*`) for theming and provides responsive sizing (12px width on mobile, 14px on desktop). It automatically handles hover states and smooth transitions between normal and active states.