Spacer

Pushes the rest of a row to the end.

JavaScript off: what the HTML and CSS do on their own.

Takes up the free space in a Stack or Row, pushing what follows to the end.

Usage

razor

<Row><Logo /><Spacer /><Button>Sign in</Button></Row>

In a row

Put a Spacer between groups in a Row to push everything after it to the end, here the header's buttons.

Preview Code

Preview

Acme

Code

AppBar.razor

<Row Gap="3" Align="Align.Center" PaddingX="4" PaddingY="3" Border="1" Radius="Radius.Lg" Grow>
    <Center Width="2.Rem" Height="2.Rem" Bg="Color.Primary" Radius="Radius.Md">
        <Icon Name="Lucide.Zap" Size="IconSize.Sm" />
    </Center>
    <TextBlock As="span" Weight="FontWeight.Semibold">Acme</TextBlock>
    <Spacer />
    <Button Variant="ButtonVariant.Ghost" Accent="Accent.Neutral">Docs</Button>
    <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Sign in</Button>
</Row>

In a column

In a Column it takes the free height instead, so both buttons sit at the bottom of their cards however long the text above them.

Preview Code

Preview

Starter

For side projects.

Team

For teams that ship every day: shared projects, roles, audit logs and priority support.

Code

Plans.razor

<Grid Columns="new() { Base = 1, Sm = 2 }" Gap="4" Grow>
    <Column Gap="3" Padding="5" Border="1" Radius="Radius.Lg">
        <Heading Level="3">Starter</Heading>
        <TextBlock Color="Color.Muted">For side projects.</TextBlock>
        <Spacer />
        <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Choose Starter</Button>
    </Column>
    <Column Gap="3" Padding="5" Border="1" Radius="Radius.Lg">
        <Heading Level="3">Team</Heading>
        <TextBlock Color="Color.Muted">For teams that ship every day: shared projects, roles, audit logs and priority support.</TextBlock>
        <Spacer />
        <Button>Choose Team</Button>
    </Column>
</Grid>

Mode support

What works in each mode, Spacer
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Parameters

Spacer parameters
Prop	Type	Default
`As`The element to render: div on a Box; components built on it set their own (List a ul, Section a section).	`string`	`"div"`
`ChildContent`The content.	`RenderFragment?`

Plus 25 surface props, 16 item props and 4 common props.

Full API