Editor toolbar

A document toolbar in a Toolbar: a joined group of formatting buttons, icon buttons with labels, and the main action on the right. At phone width what doesn't fit moves into the … menu, with JavaScript off too.

Editor toolbar

Toolbar.razor

<Card Size="ControlSize.Sm" Width="Length.Full">
    <CardBody Gap="4">
        <Toolbar Label="Editor">
            <ToolbarButtonGroup Label="History">
                <ToolbarIconButton Icon="Lucide.Undo2" Label="Undo" />
                <ToolbarIconButton Icon="Lucide.Redo2" Label="Redo" />
            </ToolbarButtonGroup>
            <ToolbarButtonGroup Label="Text style" Variant="ButtonVariant.Outline" Priority="1">
                <ToolbarIconButton Icon="Lucide.Bold" Label="Bold" />
                <ToolbarIconButton Icon="Lucide.Italic" Label="Italic" />
                <ToolbarIconButton Icon="Lucide.Underline" Label="Underline" />
            </ToolbarButtonGroup>
            <ToolbarSeparator />
            <ToolbarButton StartIcon="Lucide.Link">Link</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.Image">Image</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.Eye" Position="ToolbarPosition.End">Preview</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.Send" Accent="Accent.Primary" Variant="ButtonVariant.Solid" Position="ToolbarPosition.End" Overflow="ToolbarOverflow.Never">Publish</ToolbarButton>
        </Toolbar>
        <Divider />
        <Stack Gap="2">
            <Heading Level="2" Size="TextSize.Xl">Release notes</Heading>
            <TextBlock Color="Color.Muted">Start writing, or paste the notes from the changelog.</TextBlock>
        </Stack>
    </CardBody>
</Card>

Button overview Variant in the API