Tag

A keyword or filter, linked or removable.

An interactive page: C# runs over a Blazor Server connection.

Usage

razor

<Tag Label="Blazor" Href="/topics/blazor" />

@* An applied filter: a link on static pages, C# on interactive ones. *@
<Tag Label="Status: Paid" Status="Status.Success"
     RemoveHref="@Navigation.GetUriWithQueryParameter("status", (string?)null)"
     OnRemove="ClearStatus" />

A tag is a keyword, a category or a filter that's applied, and can be a link or removed. For a small status label or a count, use a Badge; for choosing several values in a form, a MultiSelect.

Status and variants

Use Status or Accent for the color and Variant for the weight: Soft (the default), Solid or Outline.

Preview Code

Preview

Design Docs Shipped Blocked Bug

Soft Solid Outline

Code

Variants.razor

<Stack Gap="3" Align="Align.Center">
    <Row Gap="2" Wrap Justify="Justify.Center">
        <Tag Label="Design" />
        <Tag Label="Docs" Status="Status.Info" />
        <Tag Label="Shipped" Status="Status.Success" />
        <Tag Label="Blocked" Status="Status.Warning" />
        <Tag Label="Bug" Status="Status.Danger" />
    </Row>
    <Row Gap="2" Wrap Justify="Justify.Center">
        <Tag Label="Soft" Accent="Accent.Primary" />
        <Tag Label="Solid" Accent="Accent.Primary" Variant="TagVariant.Solid" />
        <Tag Label="Outline" Accent="Accent.Primary" Variant="TagVariant.Outline" />
    </Row>
</Stack>

Links, icons and sizes

Use Href to make a tag a link, StartIcon for an icon and Size for 20, 24 or 28px tall.

Preview Code

Preview

blazor static-ssr accessibility

Small Medium Large

Code

LinksSizes.razor

<Stack Gap="3" Align="Align.Center">
    <Row Gap="2" Wrap Justify="Justify.Center">
        <Tag Label="blazor" Href="docs/components" StartIcon="Lucide.Hash" />
        <Tag Label="static-ssr" Href="docs/components" StartIcon="Lucide.Hash" />
        <Tag Label="accessibility" Href="docs/components" StartIcon="Lucide.Hash" />
    </Row>
    <Row Gap="2" Wrap Align="Align.Center" Justify="Justify.Center">
        <Tag Label="Small" Size="ControlSize.Sm" />
        <Tag Label="Medium" />
        <Tag Label="Large" Size="ControlSize.Lg" />
    </Row>
</Stack>

Removable

Use RemoveHref for a remove link that works on any page, such as the current address without that filter, and OnRemove for C# on interactive ones.

Preview Code

Preview

Status: PaidRegion: EuropeThis quarterReset

Code

Remove.razor

@inject NavigationManager Navigation

<Row Gap="2" Wrap Align="Align.Center" Justify="Justify.Center">
    @foreach (var filter in Filters.Where(f => !_removed.Contains(f)))
    {
        <Tag Label="@filter" RemoveHref="@UrlWithout(filter)" OnRemove="() => _removed.Add(filter)" />
    }
    @if (_removed.Count > 0)
    {
        @if (RendererInfo.IsInteractive)
        {
            <Button Variant="ButtonVariant.Link" Size="ControlSize.Sm" OnClick="() => _removed.Clear()">Reset</Button>
        }
        else
        {
            <Button Href="@Navigation.GetUriWithQueryParameter("removed", (string?)null)" Variant="ButtonVariant.Link" Size="ControlSize.Sm">Reset</Button>
        }
    }
</Row>

@code {
    // Static pages: the remove links point here with the filter added to ?removed=…
    [SupplyParameterFromQuery(Name = "removed")]
    private string[]? RemovedQuery { get; set; }

    private HashSet<string> _removed = [];

    protected override void OnInitialized() => _removed = [.. RemovedQuery ?? []];

    private string UrlWithout(string filter) =>
        Navigation.GetUriWithQueryParameters(new Dictionary<string, object?> { ["removed"] = _removed.Append(filter).ToArray() });

}

Live: Each remove control is a button that runs OnRemove in C#, with no page load.

Give both, as here, when a tag may render in either: an interactive page uses OnRemove, and a static one the link. With only OnRemove, a static page shows no remove control at all. For a row of filters a FilterForm applies, build each RemoveHref with Navigation.GetUriWithQueryParameter so the rest of the address stays.

Its own words

Use RemoveLabel for the word before the label in the remove control's name ("Remove", as in "Remove Blazor"), or set it for the whole app as in Text and other languages.

Mode support

What works in each mode, Tag
Feature	Off	Static	Live
Colors, sizes, icons and links	Yes	Yes	Yes
Removed by a link (RemoveHref)	Yes	Yes	Yes
Removed by C# (OnRemove)	No	No	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders a span; with Href its text is a link.
The remove control is a button (OnRemove on an interactive page) or a link (RemoveHref), named "Remove" and the label, as in "Remove Blazor" (RemoveLabel).
With only ChildContent and no Label, the remove control is named just "Remove", so give tags in a list a Label.
Status and Accent are color only: put the meaning in the text, as in "Status: Paid".

Parameters

Tag parameters
Prop	Type	Default
`Label`The text.	`string?`
`ChildContent`Custom content in place of Label.	`RenderFragment?`
`Status`The color's meaning.	`Status`	`Status.Neutral`
`Accent`A color in place of Status's, such as Accent.Primary or Accent.Of("#0d9488").	`Accent?`
`Variant`Visual weight.	`TagVariant`	`TagVariant.Soft`
`Size`Size: 20, 24 (the default) or 28px tall.	`ControlSize`	`ControlSize.Md`
`StartIcon`An icon before the text.	`IconData?`
`Href`Makes the tag's text a link.	`string?`
`RemoveHref`Adds a remove link to this address, such as the current page without this filter.	`string?`
`RemoveLabel`The remove control's name, before the label: "Remove Blazor".	`string?`	`"Remove"`
`OnRemove`Adds a remove button that runs this on interactive pages.	`EventCallback`

Plus 16 item props and 4 common props.

Full API