Blazorise Sizes

Apply consistent size tokens to buttons, inputs, modals, and figures without custom CSS.

Size enums provide a shared vocabulary for scaling UI elements across providers, so a small button or large modal feels consistent no matter which CSS framework you use.

How it works

Use Size to scale components such as <Button>, <TextInput>, and <Badge>. Use ModalSize for modals and FigureSize for figures when you need predictable, token-based sizing without custom CSS.

Examples

Component sizing

Mix and match Size values on common controls to keep touch targets and input fields aligned across layouts.

Buttons

Text inputs

<Div Margin="Margin.Is2.FromBottom">
    <Paragraph Margin="Margin.Is2.FromBottom">Buttons</Paragraph>
    <Button Color="Color.Primary" Size="Size.ExtraSmall" Margin="Margin.Is1.FromEnd.Is1.FromBottom">Extra small</Button>
    <Button Color="Color.Primary" Size="Size.Small" Margin="Margin.Is1.FromEnd.Is1.FromBottom">Small</Button>
    <Button Color="Color.Primary" Size="Size.Medium" Margin="Margin.Is1.FromEnd.Is1.FromBottom">Medium</Button>
    <Button Color="Color.Primary" Size="Size.Large" Margin="Margin.Is1.FromEnd.Is1.FromBottom">Large</Button>
</Div>

<Div>
    <Paragraph Margin="Margin.Is2.FromBottom">Text inputs</Paragraph>
    <TextInput Placeholder="Small input" Size="Size.Small" Margin="Margin.Is1.FromEnd.Is1.FromBottom" />
    <TextInput Placeholder="Default input" Margin="Margin.Is1.FromEnd.Is1.FromBottom" />
    <TextInput Placeholder="Large input" Size="Size.Large" Margin="Margin.Is1.FromEnd.Is1.FromBottom" />
</Div>

Modal sizes

Use ModalSize to pick the right width for focused tasks versus data-heavy dialogs. 

<Button Color="Color.Primary" Margin="Margin.Is2.FromEnd" Clicked="@ShowSmallModal">Small modal</Button>
<Button Color="Color.Primary" Clicked="@ShowLargeModal">Large modal</Button>

<Modal @ref="smallModal" Size="ModalSize.Small">
    <ModalContent>
        <ModalHeader>
            <ModalTitle>Small modal</ModalTitle>
            <CloseButton Clicked="@HideSmallModal" />
        </ModalHeader>
        <ModalBody>
            Use smaller modals for short confirmations or quick tasks.
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideSmallModal">Close</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

<Modal @ref="largeModal" Size="ModalSize.Large">
    <ModalContent>
        <ModalHeader>
            <ModalTitle>Large modal</ModalTitle>
            <CloseButton Clicked="@HideLargeModal" />
        </ModalHeader>
        <ModalBody>
            Larger dialogs give breathing room for forms or data-heavy content.
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideLargeModal">Close</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

@code {
    private Modal smallModal;
    private Modal largeModal;

    private Task ShowSmallModal()
    {
        return smallModal.Show();
    }

    private Task ShowLargeModal()
    {
        return largeModal.Show();
    }

    private Task HideSmallModal()
    {
        return smallModal.Hide();
    }

    private Task HideLargeModal()
    {
        return largeModal.Hide();
    }
}

Figure sizes

Figure sizing keeps avatars and media blocks consistent without manual pixel sizing.

Placeholder
64x64
Placeholder
128x128
Placeholder
256x256
<Div Flex="Flex.Row.Wrap">
    <Figure Size="FigureSize.Is64x64" Margin="Margin.Is2.FromEnd.Is2.FromBottom">
        <FigureImage Source="img/empty-256x256.png" AlternateText="Placeholder" />
        <FigureCaption>64x64</FigureCaption>
    </Figure>
    <Figure Size="FigureSize.Is128x128" Margin="Margin.Is2.FromEnd.Is2.FromBottom">
        <FigureImage Source="img/empty-256x256.png" AlternateText="Placeholder" />
        <FigureCaption>128x128</FigureCaption>
    </Figure>
    <Figure Size="FigureSize.Is256x256" Margin="Margin.Is2.FromEnd.Is2.FromBottom">
        <FigureImage Source="img/empty-256x256.png" AlternateText="Placeholder" />
        <FigureCaption>256x256</FigureCaption>
    </Figure>
</Div>

Reference

Size

Defines an element size.

  • Default No particular size rule will be applied.
  • ExtraSmall Makes an element extra small size.
  • Small Makes an element small size.
  • Medium Makes an element medium size.
  • Large Makes an element large.
  • ExtraLarge Makes an element extra large.

Button size

Buttons use the Size enum for consistent scaling.

  • Default Default button size for the current provider.
  • ExtraSmall Makes a button extra small.
  • Small Makes a button appear smaller.
  • Medium Makes a button medium size.
  • Large Makes a button appear larger.
  • ExtraLarge Makes a button extra large.

ModalSize

Changes the size of the modal.

  • Default Default modal size for current provider.
  • Small Small modal.
  • Large Large modal.
  • ExtraLarge Extra large modal.
  • Fullscreen Covers the entire viewport.

FigureSize

Defines the size of the figure component.

  • Default No sizing applied.
  • Is16x16 16x16 px
  • Is24x24 24x24 px
  • Is32x32 32x32 px
  • Is48x48 48x48 px
  • Is64x64 64x64 px
  • Is96x96 96x96 px
  • Is128x128 128x128 px
  • Is256x256 256x256 px
  • Is512x512 512x512 px
On this page