Log Filtering Toolbar
Enterprise
Workflow
Advanced filtering toolbar for searching and filtering audit logs by severity, category, and text with color-coded toggle buttons and multi-select support.
Preview
Try filtering by different criteria
Severity:
Category:
Current Filters:
{}Custom Categories
Toolbar with custom category and severity options
Severity:
Category:
Props
LogFilteringToolbar component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
onFilterChange* | (filters: LogFilters) => void | — | Callback when filters change |
availableCategories | string[] | ['REQUEST', 'AI', 'ROUTE', 'APPROVAL', 'ERROR'] | List of category options |
availableSeverities | string[] | ['info', 'warning', 'error', 'success'] | List of severity options |
className | string | — | Additional CSS classes |
LogFilters Type
| Prop | Type | Default | Description |
|---|---|---|---|
severity | string[] | — | Selected severity levels |
category | string[] | — | Selected categories |
dateRange | { start: Date; end: Date } | — | Date range filter |
searchQuery | string | — | Text search query |
Usage
Import and implementation example
import { LogFilteringToolbar } from '@/components/ui/log-filtering-toolbar'
export default function Example() {
const [filters, setFilters] = useState({})
return (
<LogFilteringToolbar
onFilterChange={setFilters}
availableCategories={['REQUEST', 'AI', 'ROUTE', 'APPROVAL', 'ERROR']}
availableSeverities={['info', 'warning', 'error', 'success']}
/>
)
}This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Text search: Full-text search across log entries
- Severity filtering: Color-coded toggle buttons for severity levels
- Category filtering: Filter by log category or source
- Multi-select: Combine multiple filters for precise results
- Clear all: One-click reset for all active filters
- Customizable: Define your own severity levels and categories
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Filter buttons are native button elementsSearch input has proper input semanticsClear button is labeledKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between search and filter buttons |
| Enter / Space | Toggle filter buttons |
Notes
- Severity colors have sufficient contrast
- Selected state indicated by fill color change
- Filter count communicated in button labels
- Clear filters button only appears when filters are active