<!-- source-hash: c30b64318f47dca7ee1a247746568b97 -->
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 (
    <header className="flex h-12">
      <HeaderButton
        icon={<MenuIcon size={20} />}
        isActive={activeButton === 'menu'}
        onClick={() => setActiveButton('menu')}
        aria-label="Open menu"
      />
      
      <HeaderButton
        icon={<SearchIcon size={20} />}
        isActive={activeButton === 'search'}
        onClick={() => setActiveButton('search')}
        className="ml-2"
      />
    </header>
  )
}
```

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.