Skip to content
LAYOUT · FREE

Toolbar

A row of tools, ready for the keyboard.

A row of tool buttons with the right role for assistive technology.

Why it helps

  • Toolbar semantics
  • Consistent spacing
  • Fits any buttons

Where it fits

  • Editors
  • Table headers
  • Panels
Toolbar control in a RayCraft page

Example

<Toolbar Label="Editor">
    <IconButton Icon="IconName.Undo" Label="Undo" />
    <IconButton Icon="IconName.Redo" Label="Redo" />
    <Divider Vertical="true" />
    <ToggleButton @bind-Pressed="_bold" Size="Size.Small">Bold</ToggleButton>
    <ToggleButton @bind-Pressed="_italic" Size="Size.Small">Italic</ToggleButton>
    <Divider Vertical="true" />
    <Button Variant="Variant.Text" Size="Size.Small" StartIcon="IconName.Print">Print</Button>
</Toolbar>

@code {
    private bool _bold;
    private bool _italic;
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation