Toolbar Component
A flexible filter/search/action bar for list pages and data views.
Basic
Search + dropdown + date picker
razor
@* Toolbar inputs use Size="sm" to read as a compact filter bar *@
<Toolbar>
<LeftZone>
<InputField Placeholder="Search" @bind-Value="searchText">
<LeadingIcon><svg>...search...</svg></LeadingIcon>
</InputField>
<Dropdown Size="sm" Placeholder="Status"
Items="statusItems"
@bind-SelectedValue="selectedStatus" />
<DatePickerDropdown Placeholder="Date" />
</LeftZone>
</Toolbar>With actions
Left zone filters + right zone buttons
razor
<Toolbar>
<LeftZone>
<InputField Placeholder="Search patients..." @bind-Value="searchText" />
<Dropdown Size="sm" Placeholder="Department" Items="departmentItems" />
</LeftZone>
<RightZone>
<Button Variant="secondary" Size="sm" Text="Export" />
<Button Variant="primary" Size="sm" Text="Add Patient" />
</RightZone>
</Toolbar>Full toolbar
Search + multiple dropdowns + actions
razor
<Toolbar>
<LeftZone>
<InputField Placeholder="Search..." />
<Dropdown Size="sm" Placeholder="Status" Items="statusItems" />
<Dropdown Size="sm" Placeholder="Department" Items="departmentItems" />
<DatePickerDropdown Placeholder="Date range" />
</LeftZone>
<RightZone>
<Button Variant="secondary" Size="sm" Text="Export" />
<Button Variant="secondary" Size="sm" Text="Import" />
<Button Variant="primary" Size="sm" Text="Create" />
</RightZone>
</Toolbar>Simple (ChildContent)
Single-row content without zones
razor
@* No LeftZone/RightZone — all content flows inline *@
<Toolbar>
<InputField Placeholder="Quick search..." />
<Button Variant="secondary" Size="sm" Text="Filter" />
<Button Variant="primary" Size="sm" Text="Add New" />
</Toolbar>Divider & bordered
ShowDivider and Bordered variants
razor
@* Divider between toolbar and content below *@
<Toolbar ShowDivider="true">...</Toolbar>
@* Card-like bordered container *@
<Toolbar Bordered="true">...</Toolbar>