Patterns
Category Filter
A row of pill buttons for filtering a list by category, with an all-posts button.
A row of pill buttons for filtering a blog (or any list) by category, with a leading "all posts" button. It is controlled — the active category is highlighted and the host owns routing through onSelect.
Import
import { CategoryFilter } from "@yuhuanowo/yunui/patterns";
Example
onSelect is a function, which can't cross the server→client boundary in MDX, so the example is rendered from a small client wrapper that tracks the selection in state.
CategoryFilter
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| allLabel | string | All Posts | Localized label for the "all posts" button; defaults to English. |
| categories* | string[] | — | |
| onSelect* | (category: string | null) => void | — | Called with the chosen category, or null for "all". Host owns routing. |
| selectedCategory | string | — |