The Toolbar control arranges action buttons into a compact horizontal (default) or vertical strip. It is the standard building block for page headers, action bars, and form footers — anywhere you need a tight, consistent row of buttons without writing layout code by hand. TOOLBAR ORIENTATIONS HORIZONTAL (default) New Edit Delete Orientation.Horizontal VERTICAL New Edit Delete Orientation.Vertical Page Header · Action Bar · Form Footer Controls.Toolbar .WithView(Controls.Button(…)) .WithView(…) [optional] .WithOrientation(Orientation.Vertical)

Horizontal (default) and vertical toolbar layouts — both built from the same Controls.Toolbar API.


Basic Usage

The simplest toolbar wraps a few buttons and renders them side by side:

Controls.Toolbar
    .WithView(Controls.Button("New"))
    .WithView(Controls.Button("Edit"))
    .WithView(Controls.Button("Delete"))

Vertical Toolbar

Pass Orientation.Vertical to stack buttons top-to-bottom instead — useful for side-panels and narrow column layouts:

Controls.Toolbar
    .WithOrientation(Orientation.Vertical)
    .WithView(Controls.Button("New"))
    .WithView(Controls.Button("Edit"))
    .WithView(Controls.Button("Delete"))

Toolbar with Icons

Icon-only buttons keep toolbars compact. Combine an empty label with WithIconStart to replace text with a symbol:

Controls.Toolbar
    .WithView(Controls.Button("").WithIconStart(FluentIcons.Add()))
    .WithView(Controls.Button("").WithIconStart(FluentIcons.Edit()))
    .WithView(Controls.Button("").WithIconStart(FluentIcons.Delete()))

Common Patterns

Page Header Toolbar

Place a toolbar on the right side of a page title by combining it with a horizontal Stack that distributes space between the two sides:

Controls.Stack
    .WithOrientation(Orientation.Horizontal)
    .WithHorizontalAlignment("space-between")
    .WithView(Controls.Html("<h2>Users</h2>"))
    .WithView(
        Controls.Toolbar
            .WithView(Controls.Button("Add User"))
            .WithView(Controls.Button("Export"))
    )

Form Action Bar

Anchor the Save / Cancel buttons to the bottom of a form by nesting a toolbar inside a vertical stack:

Controls.Stack
    .WithVerticalGap("16px")
    .WithView(Controls.Label("Form content goes here"))
    .WithView(
        Controls.Toolbar
            .WithView(Controls.Button("Cancel"))
            .WithView(Controls.Button("Save"))
    )

Configuration Reference

Method Purpose Values
.WithOrientation(orientation) Control the button layout direction Orientation.Horizontal (default), Orientation.Vertical

Skin Properties

ToolbarSkin exposes one layout property:

Property Type Default
Orientation object? Orientation.Horizontal

See Also

Reconnecting…
The connection to the server was interrupted. Trying to restore it…
Trying again…
The connection could not be restored. Reloading the page…
The server was updated. Reloading the page to pick up the latest version.