Code snippets used in the FAST blog post named "What's new in the Microsoft Fluent UI library for Blazor versions 1.3 and 1.4".

design-tokens-as-components.razor

<BaseLayerLuminance Value="(float?)0.15">
  <FluentCard BackReference="@context">
    <div class="contents">
      Dark
      <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
      <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
      <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
      <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
    </div>
  </FluentCard>
</BaseLayerLuminance>

design-tokens.cs

[Inject]
private BaseLayerLuminance BaseLayerLuminance { get; set; } = default!;

[Inject]
private AccentBaseColor AccentBaseColor { get; set; } = default!;

[Inject]
private BodyFont BodyFont { get; set; } = default!;

[Inject]
private StrokeWidth StrokeWidth { get; set; } = default!;

[Inject]
private ControlCornerRadius ControlCornerRadius { get; set; } = default!;

private FluentButton? ref1;
private FluentButton? ref2;
private FluentButton? ref3;
private FluentButton? ref4;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  if (firstRender)
  {
    //Set to dark mode
    await BaseLayerLuminance.SetValueFor(ref1!.Element, (float)0.15);
    //Set to Excel color
    await AccentBaseColor.SetValueFor(ref2!.Element, "#185ABD".ToSwatch());
    //Set the font
    await BodyFont.SetValueFor(ref3!.Element, "Comic Sans MS");
    //Set 'border' width for ref4
    await StrokeWidth.SetValueFor(ref4!.Element, 7);
    //And change conrner radius as well
    await ControlCornerRadius.SetValueFor(ref4!.Element, 15);
    
    StateHasChanged();
  }
}

public async Task OnClick()
{
  //Remove the wide border
  await StrokeWidth.DeleteValueFor(ref4!.Element);
}

design-tokens.razor

<FluentButton @ref="ref1" Appearance="Appearance.Filled">A button</FluentButton>
<FluentButton @ref="ref2" Appearance="Appearance.Filled">Another button</FluentButton>
<FluentButton @ref="ref3" Appearance="Appearance.Filled">And one more</FluentButton>
<FluentButton @ref="ref4" Appearance="Appearance.Filled" @onclick=OnClick>Last button</FluentButton>

fluent-icons.razor

<FluentIcon [email protected] Size=IconSize.Size32 Filled=true />

icon-slot.razor

<FluentButton @onclick="HandleSearch">
  Search
  <FluentIcon Name="@FluentIcons.Search" Size="@IconSize.Size16" Filled=false Slot="start"></FluentIcon>
</FluentButton>