• Blazor
  • ASP.NET Core
  • .NET
  • C#

Blazor - Cascading Component Attributes

When using Blazor you will sometimes need to give a Button some of your own flare, with that comes the problem of mapping all the attributes to another tag from your component. Below I show an out of the box way to cascade the attributes from your wrapper component to a tag, in this case a button.


Checkout a live Demo here EventHorizon.Blazor.UX.

You can also checkout the source of the whole site in the canhorn/EventHorizon.Blazor.UX Github repository.

A cascaded attributes example component. Show how you can expand on the class with your own and any that are also passed in.

<button class="my-awesome-button @@class" @attributes="Attributes">@ChildContent</button>

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object> Attributes { get; set; }
    public string @class { get; set; }
    public RenderFragment ChildContent { get; set; }

Example Usage of Button

<Button class="--font-size-huge" disabled>Huge Disabled Button</Button>

Generated HTML

<button class="my-awesome-button --font-size-huge" disabled>Huge Disabled Button</Button>

Cody's logo image, it is an abstract of a black hole with a white Event Horizon.

Cody Merritt Anhorn

A Engineer with a passion for Platform Architecture and Tool Development.