Blog Feed Header
Blog feed header with filters
Overview
A header section for blog listing pages. Renders a title row with an optional search input, and a row of category filter pills below.
Usage
import { BlogFeedHeader } from "@leanicon/web-builder-library";Default
Heading with category pills and search input. Pass onSearchChange to show the search field and onCategoryChange to enable pill selection.
The LeanIcon Blog
Without search
When onSearchChange is not provided, the search input is hidden.
The LeanIcon Blog
Without categories
When categories is omitted, only the heading and search input are rendered.
The LeanIcon Blog
Heading only
When both categories and onSearchChange are omitted, only the heading is rendered.
The LeanIcon Blog
Custom search placeholder
Override the placeholder text via searchPlaceholder.
The LeanIcon Blog
Active category selected
Shows a non-default pill as active.
The LeanIcon Blog
Dark mode
The LeanIcon Blog
Dark mode — heading only
The LeanIcon Blog
Props
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Page title (required) |
|
| — | Category filter pills |
|
| — | Value of the currently active pill |
|
| — | Called when a category pill is clicked |
|
|
| Controlled value for the search input |
|
| — | Called on search input change — hides input if omitted |
|
|
| Placeholder text for the search input |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
CategoryFilter
Prop | Type | Description |
|---|---|---|
|
| Display text for the pill |
|
| Value passed to |
Notes
- The search input only renders when
onSearchChangeis provided. - Category pills only render when
categorieshas at least one entry. - The active pill gets
bg-primary text-primary-foreground; inactive pills get an outlined style. - Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
heading | string | — | Yes | |
categories | CategoryFilter[] | — | No | |
activeCategory | string | — | No | |
onCategoryChange | ((value: string) => void) | — | No | |
searchValue | string | — | No | |
onSearchChange | ((value: string) => void) | — | No | |
searchPlaceholder | string | Search posts | No | |
colorScheme | enum | — | No | |
className | string | — | No | |
headingLevel | enum | h1 | No | Defaults to h1 (page-surface usage); pass 'h2' when embedded under a page h1 (spec 007 D7). |