Size System

The Size enum defines four values: Small, Medium, Large, and ExtraLarge. Every component that supports sizing accepts this enum, ensuring consistent dimensions across the entire component library. Medium is the default for all components.

public enum Size
{
    Small,
    Medium,
    Large,
    ExtraLarge
}

See all four sizes rendered side by side on real components. Each component reads the Size parameter and resolves it to the appropriate Tailwind CSS classes via ComponentStyleHelper.

Each Size value maps to specific Tailwind CSS utility classes. The table below shows the exact class and pixel value for each aspect at every size level.

ComponentStyleHelper is a static class that centralizes all size-to-CSS mappings. Components call these methods internally so you never need to write Tailwind classes for sizing manually.

public static string GetSizeClass(Variant variant, Size size) => size switch
{
    Size.Small     => variant == Variant.Text ? "min-h-8 px-0.5 py-0.5" : "min-h-9 px-2.5 py-1",
    Size.Large     => variant == Variant.Text ? "min-h-11 px-0.5 py-1.5" : "min-h-12 px-3.5 py-2.5",
    Size.ExtraLarge=> variant == Variant.Text ? "min-h-12 px-0.5 py-2"   : "min-h-14 px-4 py-3",
    _              => variant == Variant.Text ? "min-h-10 px-0.5 py-1"   : "min-h-11 px-3 py-2"
};

public static string GetInputSizeClass(Size size) => size switch
{
    Size.Small     => "text-sm",
    Size.Large     => "text-base",
    Size.ExtraLarge=> "text-base",
    _              => "text-sm"
};

public static string GetActionButtonSizeClass(Size size) => size switch
{
    Size.Small     => "h-3.5 w-3.5",
    Size.Large     => "h-5 w-5",
    Size.ExtraLarge=> "h-6 w-6",
    _              => "h-4 w-4"
};

The Breakpoint enum controls responsive layout behavior. Components like Split and Sidebar use it to determine at which screen width to collapse from a multi-column to a single-column layout. The None value disables collapsing entirely.

public enum Breakpoint
{
    None,
    Small,
    Medium,
    Large,
    ExtraLarge
}

Pass a Breakpoint value to layout components via CollapseAt or similar parameters. For example, CollapseAt="Breakpoint.Large" makes a Split component stack vertically on screens narrower than the large breakpoint.

The size system is implemented across these source files in the Sillium.Core.Blazor library.