Toolbar Examples
Use the Toolbar component to create action bars with buttons, inputs, and other controls. Toolbars provide a consistent way to group related actions and maintain proper spacing and layout.
Default Toolbar #
Basic toolbar with buttons and styled background.
<Toolbar>
<ChildContent>
<Button Size="ButtonSize.Small">Action 1</Button>
<Button Size="ButtonSize.Small">Action 2</Button>
<Button Size="ButtonSize.Small">Action 3</Button>
</ChildContent>
</Toolbar>Embedded Toolbar #
Toolbar with transparent background, perfect for embedding in pages or cards.
<Toolbar Embedded="true">
<ChildContent>
<TextInput Placeholder="Search..." Class="w-64" />
<Button Size="ButtonSize.Small" Class="ml-2">Search</Button>
</ChildContent>
</Toolbar>Toolbar with End Content #
Use the End parameter to place content on the right side of the toolbar.
<Toolbar Embedded="true">
<ChildContent>
<TextInput Placeholder="Search for users..." Class="w-80" />
</ChildContent>
<End>
<Button Size="ButtonSize.Small">
<PlusIcon Size="IconSize.Small" Class="mr-2" />
Add User
</Button>
</End>
</Toolbar>Toolbar with Icon Buttons #
Use ToolbarButton for icon-only actions with consistent styling.
<Toolbar Embedded="true">
<ChildContent>
<div class="flex items-center space-x-1">
<ToolbarButton AriaLabel="Settings">
<CogIcon Size="IconSize.Large" />
</ToolbarButton>
<ToolbarButton AriaLabel="Delete">
<TrashBinIcon Size="IconSize.Large" />
</ToolbarButton>
<ToolbarButton AriaLabel="Notifications">
<BellIcon Size="IconSize.Large" />
</ToolbarButton>
</div>
</ChildContent>
</Toolbar>Interactive Toolbar #
Toolbar with state management for interactive controls.
<Toolbar Embedded="true">
<ChildContent>
<TextInput @bind-Value="_searchQuery"
Placeholder="Search..."
Class="w-64" />
</ChildContent>
<End>
<span class="text-sm text-gray-500 dark:text-gray-400">
Results: @_resultCount
</span>
<Button Size="ButtonSize.Small"
OnClick="@HandleSearch"
Class="ml-2">
Search
</Button>
</End>
</Toolbar>
@code {
private string _searchQuery = "";
private int _resultCount = 0;
private void HandleSearch()
{
_resultCount = _searchQuery.Length * 3;
}
}CRUD Table Toolbar #
Complete toolbar example for CRUD operations with search, actions, and button groups.
<Toolbar Embedded="true" Class="w-full py-4 text-gray-500 dark:text-gray-300">
<ChildContent>
<TextInput Placeholder="Search for users..." Class="me-4 w-80 border xl:w-96" />
<div class="border-l border-gray-100 pl-2 dark:border-gray-700 flex items-center space-x-1">
<ToolbarButton AriaLabel="Settings">
<CogIcon Size="IconSize.Large" />
</ToolbarButton>
<ToolbarButton AriaLabel="Delete">
<TrashBinIcon Size="IconSize.Large" />
</ToolbarButton>
<ToolbarButton AriaLabel="Alert">
<ExclamationCircleIcon Size="IconSize.Large" />
</ToolbarButton>
<ToolbarButton AriaLabel="More options">
<DotsVerticalIcon Size="IconSize.Large" />
</ToolbarButton>
</div>
</ChildContent>
<End>
<div class="flex items-center space-x-2">
<Button Size="ButtonSize.Small" Class="gap-2 px-3 whitespace-nowrap">
<PlusIcon Size="IconSize.Small" />
Add user
</Button>
<Button Size="ButtonSize.Small"
Style="ButtonStyle.Outline"
Class="gap-2 px-3">
<DownloadIcon Size="IconSize.Medium" Class="-ml-1" />
Export
</Button>
</div>
</End>
</Toolbar>