Skip to content
daisyBlazor
Change theme, current: daisyblazor
Choose a theme All 37 →

Spacer

An empty flex-grow element that pushes its siblings apart inside a row. Use it in toolbars and headers; drops in for MudSpacer.
LayoutReplaces MudSpacer
Cover · <Spacer>

File storage

Pro plan

2 GB used
5 GB

Examples

Toolbar

One Spacer pushes the actions to the far end of the row.

Q4 roadmap
website/Examples/Layout/SpacerToolbarExample.razor Source

Centring

Two Spacers share the free space, centring whatever sits between them.

Settings
website/Examples/Layout/SpacerCenterExample.razor Source

API

<Spacer>

DaisyBlazor

Parameters

  • Class string
    = null

    Additional CSS classes merged onto the flex-1 filler.

  • Style string
    = null

    Inline styles applied to the filler element.

From MudSpacer

Spacer keeps MudSpacer's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.

<MudSpacer> <Spacer>
Esc
  • Getting started Install the packages, turn on the CSS build, register services and render your first component. Guide
  • Theming ThemeProvider, the built-in themes, dark mode, persistence, brand themes and a theme picker. Guide
  • CSS preset What preset.css ships, how the NuGet package builds your CSS without Node, and the class safelist. Guide
  • Charts 54 theme-aware SVG chart types, laid out by a bundled D3 module, with optional server rendering. Guide
  • Migrating from MudBlazor Move a MudBlazor app over incrementally, mostly by renaming MudX to X. Guide
  • Themes All 37 themes rendered live, side by side; switch the whole site with one click. Guide
↑↓ to move Enter to open 85 components and 54 charts indexed
Something went wrong while running the docs. Reload