Defaults and Settings


You can set application-wide defaults for individual components by modifying the static Defaults property located on most components (generic components have their non-generic class for that).

HxButton.Defaults.Outline = true;
HxButton.Defaults.Icon = BootstrapIcon.Fullscreen;

Where to set #

Defaults can be set anywhere from the application, however, as it is a shared setting, you usually set them when the application starts (Program.cs or Startup.cs).

public class Startup
	public void ConfigureServices(IServiceCollection services)



	private static void SetHxComponents()
		HxPlaceholderContainer.Defaults.Animation = PlaceholderAnimation.Glow;
		HxPlaceholder.Defaults.Color = ThemeColor.Light;

		HxButton.Defaults.Size = ButtonSize.Small;
		HxOffcanvas.Defaults.BackdropEnabled = false;
		HxOffcanvas.Defaults.HeaderCssClass = "border-bottom";
		HxOffcanvas.Defaults.FooterCssClass = "border-top";
		HxChipList.Defaults.ChipBadgeSettings.Color = ThemeColor.Light;
		HxChipList.Defaults.ChipBadgeSettings.TextColor = ThemeColor.Dark;
		HxChipList.Defaults.ChipBadgeSettings.CssClass = "p-2 rounded-pill";


Beside Defaults you can set Settings parameter on every single component instance (the data structure behind Deafults and Settings is the same). Settings let you bundle several configurations together and reuse them for several component instances.

<HxButton Settings="AppButtonSettings.MainButton" Text="Open" />
<HxButton Settings="AppButtonSettings.SecondaryButton" Text="Fullscreen" />
<HxButton Settings="AppButtonSettings.CloseButton" />

Setting application-wide collection of settings used for varying buttons serving different purposes.

public class AppButtonSettings
	public static ButtonSettings MainButton { get; } = new()
		Color = ThemeColor.Primary,
		Icon = BootstrapIcon.Fullscreen

	public static ButtonSettings SecondaryButton { get; } = new()
		Color = ThemeColor.Secondary,
		Outline = true

	public static ButtonSettings CloseButton { get; } = new()
		Color = ThemeColor.Danger,
		Outline = true,
		Icon = BootstrapIcon.XLg

Precedence #

When the component decides what parameter value to stick to, it follows this flow: parameter > Settings > Defaults, which means that if the parameter property is not set (null), then the value is taken from the Settings, if it is also not set (null), then the value is taken from the application-wide Defaults.

@* The color specified in settings is overriden by the directly set parameter -> ColorEffective is ThemeColor.Danger. *@
<HxButton Settings="settings" Color="ThemeColor.Danger" Text="Fullscreen" />

@* Although Settings are set, the directly set parameters have higher priority, so the button has no outline and the icon is set to the BS icon Door. *@
<HxButton Settings="settings" Outline="false" Icon="BootstrapIcon.DoorClosed" Text="Open" />

@code {
    private ButtonSettings settings = new()
            Color = ThemeColor.Primary,
            Icon = BootstrapIcon.Fullscreen,
            Outline = true
An unhandled error has occurred. Reload 🗙