BlazorExpress.Bulma | An enterprise-class component library built with the Blazor and Bulma CSS frameworks

How it works #

The Tag component is a small, flexible label used to highlight information, categorize content, or display status indicators in your Blazor application.

How to use:

Add the Tag component to your page wherever you want to display a label.
Set the tag's content by placing text or markup between the opening and closing <Tag> tags.
Optionally, customize the tag using parameters such as Color, Size, IsRounded, and more.

This demo shows the simplest usage of the Tag component with default settings.

Example
View Source

Tag label

<Tag>Tag label</Tag>

Colors #

The Tag component supports a variety of color options to match your application's theme or to convey meaning (such as status or category).

How to use:

Set the Color parameter to one of the predefined TagColor values (e.g., Primary, Info, Success, etc.).
Use different colors to visually distinguish tags for different purposes.

This demo displays tags with various color options.

Example
View Source

Black Dark Light White Primary Link Info Success Warning Danger

<Tag Color="TagColor.Black">Black</Tag>
<Tag Color="TagColor.Dark">Dark</Tag>
<Tag Color="TagColor.Light">Light</Tag>
<Tag Color="TagColor.White">White</Tag>
<Tag Color="TagColor.Primary">Primary</Tag>
<Tag Color="TagColor.Link">Link</Tag>
<Tag Color="TagColor.Info">Info</Tag>
<Tag Color="TagColor.Success">Success</Tag>
<Tag Color="TagColor.Warning">Warning</Tag>
<Tag Color="TagColor.Danger">Danger</Tag>

You can also display a lighter version of each color by setting the ShowLightVersion parameter to true.

How to use:

Set both the Color and ShowLightVersion="true" parameters on the Tag component.
Use light tags for subtle emphasis or to reduce visual weight.

This demo shows tags using the light color variants.

Example
View Source

Primary Link Info Success Warning Danger

<Tag Color="TagColor.Primary" ShowLightVersion="true">Primary</Tag>
<Tag Color="TagColor.Link" ShowLightVersion="true">Link</Tag>
<Tag Color="TagColor.Info" ShowLightVersion="true">Info</Tag>
<Tag Color="TagColor.Success" ShowLightVersion="true">Success</Tag>
<Tag Color="TagColor.Warning" ShowLightVersion="true">Warning</Tag>
<Tag Color="TagColor.Danger" ShowLightVersion="true">Danger</Tag>

Sizes #

The Tag component supports multiple sizes to fit different UI needs.

How to use:

Set the Size parameter to TagSize.Normal, TagSize.Medium, or TagSize.Large to adjust the tag's size.
Choose a size that best fits your layout and content.

This demo shows individual tags with different sizes.

Example
View Source

Normal Medium Large

<Tag Color="TagColor.Primary" Size="TagSize.Normal">Normal</Tag>
<Tag Color="TagColor.Link" Size="TagSize.Medium">Medium</Tag>
<Tag Color="TagColor.Info" Size="TagSize.Large">Large</Tag>

You can apply a size to a group of tags by setting the Size parameter on the Tags container. All child tags will inherit this size unless overridden.

How to use:

Wrap multiple Tag components in a Tags container.
Set the Size parameter on the Tags container to apply the size to all child tags.

This demo shows a group of medium-sized tags.

Example
View Source

Black Dark Light White Primary Link Info Success Warning Danger

<Tags Size="TagSize.Medium">
    <Tag Color="TagColor.Black">Black</Tag>
    <Tag Color="TagColor.Dark">Dark</Tag>
    <Tag Color="TagColor.Light">Light</Tag>
    <Tag Color="TagColor.White">White</Tag>
    <Tag Color="TagColor.Primary">Primary</Tag>
    <Tag Color="TagColor.Link">Link</Tag>
    <Tag Color="TagColor.Info">Info</Tag>
    <Tag Color="TagColor.Success">Success</Tag>
    <Tag Color="TagColor.Warning">Warning</Tag>
    <Tag Color="TagColor.Danger">Danger</Tag>
</Tags>

This example demonstrates a group of large tags using the Tags container with Size="TagSize.Large".

How to use:

Use the Tags container and set Size="TagSize.Large" to make all tags large.

Useful for prominent labels or headers.

Example
View Source

Black Dark Light White Primary Link Info Success Warning Danger

<Tags Size="TagSize.Large">
    <Tag Color="TagColor.Black">Black</Tag>
    <Tag Color="TagColor.Dark">Dark</Tag>
    <Tag Color="TagColor.Light">Light</Tag>
    <Tag Color="TagColor.White">White</Tag>
    <Tag Color="TagColor.Primary">Primary</Tag>
    <Tag Color="TagColor.Link">Link</Tag>
    <Tag Color="TagColor.Info">Info</Tag>
    <Tag Color="TagColor.Success">Success</Tag>
    <Tag Color="TagColor.Warning">Warning</Tag>
    <Tag Color="TagColor.Danger">Danger</Tag>
</Tags>

You can mix tag sizes within a group by setting the Size parameter on individual Tag components, even if the Tags container has a default size.

How to use:

Set a default Size on the Tags container.
Override the size for specific Tag components as needed.

This demo shows a group of medium tags with some tags using the normal size.

Example
View Source

Black Dark Primary Link Info Success Warning Danger

<Tags Size="TagSize.Medium">
    <Tag Color="TagColor.Black">Black</Tag>
    <Tag Color="TagColor.Dark" Size="TagSize.Normal">Dark</Tag>
    <Tag Color="TagColor.Primary">Primary</Tag>
    <Tag Color="TagColor.Link" Size="TagSize.Normal">Link</Tag>
    <Tag Color="TagColor.Info">Info</Tag>
    <Tag Color="TagColor.Success" Size="TagSize.Normal">Success</Tag>
    <Tag Color="TagColor.Warning">Warning</Tag>
    <Tag Color="TagColor.Danger" Size="TagSize.Normal">Danger</Tag>
</Tags>

Rounded #

The Tag component can be displayed with rounded corners for a softer appearance.

How to use:

Set the IsRounded parameter to true on the Tag component.

This demo shows tags with the IsRounded option enabled.

Example
View Source

Black Dark Light White Primary Link Info Success Warning Danger

<Tag Color="TagColor.Black" IsRounded="true">Black</Tag>
<Tag Color="TagColor.Dark" IsRounded="true">Dark</Tag>
<Tag Color="TagColor.Light" IsRounded="true">Light</Tag>
<Tag Color="TagColor.White" IsRounded="true">White</Tag>
<Tag Color="TagColor.Primary" IsRounded="true">Primary</Tag>
<Tag Color="TagColor.Link" IsRounded="true">Link</Tag>
<Tag Color="TagColor.Info" IsRounded="true">Info</Tag>
<Tag Color="TagColor.Success" IsRounded="true">Success</Tag>
<Tag Color="TagColor.Warning" IsRounded="true">Warning</Tag>
<Tag Color="TagColor.Danger" IsRounded="true">Danger</Tag>

Hover state #

The Tag component supports a hover state, allowing you to highlight tags when users move their cursor over them.

How to use:

Set the IsHoverable parameter to true on the Tag component.

This demo shows tags that visually respond to mouse hover.

Example
View Source

Black Dark Light White Primary Link Info Success Warning Danger

<Tag Color="TagColor.Black" IsHoverable="true">Black</Tag>
<Tag Color="TagColor.Dark" IsHoverable="true">Dark</Tag>
<Tag Color="TagColor.Light" IsHoverable="true">Light</Tag>
<Tag Color="TagColor.White" IsHoverable="true">White</Tag>
<Tag Color="TagColor.Primary" IsHoverable="true">Primary</Tag>
<Tag Color="TagColor.Link" IsHoverable="true">Link</Tag>
<Tag Color="TagColor.Info" IsHoverable="true">Info</Tag>
<Tag Color="TagColor.Success" IsHoverable="true">Success</Tag>
<Tag Color="TagColor.Warning" IsHoverable="true">Warning</Tag>
<Tag Color="TagColor.Danger" IsHoverable="true">Danger</Tag>

Delete #

The Tag component can be used as a delete button, providing a small, clickable "X" for removing items or tags.

How to use:

Set the IsDelete parameter to true on the Tag component.
Optionally, combine with Color and IsHoverable for additional styling and interactivity.

This demo shows delete tags in various colors.

Example
View Source

<Tag Color="TagColor.Black" IsHoverable="true" IsDelete="true" />
<Tag Color="TagColor.Dark" IsHoverable="true" IsDelete="true" />
<Tag Color="TagColor.Light" IsHoverable="true" IsDelete="true" />
<Tag Color="TagColor.White" IsHoverable="true" IsDelete="true" />
<Tag Color="TagColor.Primary" IsHoverable="true" IsDelete="true" />
<Tag Color="TagColor.Link" IsHoverable="true" IsDelete="true" />
<Tag Color="TagColor.Info" IsHoverable="true" IsDelete="true" />
<Tag Color="TagColor.Success" IsHoverable="true" IsDelete="true" />
<Tag Color="TagColor.Warning" IsHoverable="true" IsDelete="true" />
<Tag Color="TagColor.Danger" IsHoverable="true" IsDelete="true" />

You can also create rounded delete tags by combining IsDelete="true" and IsRounded="true".

How to use:

Set both IsDelete="true" and IsRounded="true" on the Tag component.

This demo shows rounded delete tags.

Example
View Source

<Tag Color="TagColor.Black" IsHoverable="true" IsDelete="true" IsRounded="true" />
<Tag Color="TagColor.Dark" IsHoverable="true" IsDelete="true" IsRounded="true" />
<Tag Color="TagColor.Light" IsHoverable="true" IsDelete="true" IsRounded="true" />
<Tag Color="TagColor.White" IsHoverable="true" IsDelete="true" IsRounded="true" />
<Tag Color="TagColor.Primary" IsHoverable="true" IsDelete="true" IsRounded="true" />
<Tag Color="TagColor.Link" IsHoverable="true" IsDelete="true" IsRounded="true" />
<Tag Color="TagColor.Info" IsHoverable="true" IsDelete="true" IsRounded="true" />
<Tag Color="TagColor.Success" IsHoverable="true" IsDelete="true" IsRounded="true" />
<Tag Color="TagColor.Warning" IsHoverable="true" IsDelete="true" IsRounded="true" />
<Tag Color="TagColor.Danger" IsHoverable="true" IsDelete="true" IsRounded="true" />

List of tags #

The Tags container allows you to display a list or group of tags together, making it easy to present related labels in a compact format.

How to use:

Wrap multiple Tag components inside a Tags container.

This demo shows a small group of tags.

Example
View Source

One Two Three

<Tags>
    <Tag>One</Tag>
    <Tag>Two</Tag>
    <Tag>Three</Tag>
</Tags>

You can display a larger set of tags by adding more Tag components inside the Tags container.

How to use:

Add as many Tag components as needed within the Tags container to represent your data.

This demo shows a long list of tags.

Example
View Source

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty

<Tags>
    <Tag>One</Tag>
    <Tag>Two</Tag>
    <Tag>Three</Tag>
    <Tag>Four</Tag>
    <Tag>Five</Tag>
    <Tag>Six</Tag>
    <Tag>Seven</Tag>
    <Tag>Eight</Tag>
    <Tag>Nine</Tag>
    <Tag>Ten</Tag>
    <Tag>Eleven</Tag>
    <Tag>Twelve</Tag>
    <Tag>Thirteen</Tag>
    <Tag>Fourteen</Tag>
    <Tag>Fifteen</Tag>
    <Tag>Sixteen</Tag>
    <Tag>Seventeen</Tag>
    <Tag>Eighteen</Tag>
    <Tag>Nineteen</Tag>
    <Tag>Twenty</Tag>
</Tags>

Addon tags #

The AddonTags container allows you to group two or more tags together as a single visual unit, often used to display related information side by side.

How to use:

Wrap two or more Tag components inside an AddonTags container.
Use different Color values to distinguish each tag within the group.

This demo shows how to group tags as addons.

Example
View Source

Package BlazorExpress.Bulma nuget v1.0.0 build passing

<AddonTags>
    <Tag>Package</Tag>
    <Tag Color="TagColor.Primary">BlazorExpress.Bulma</Tag>
</AddonTags>

<AddonTags>
    <Tag Color="TagColor.Dark">nuget</Tag>
    <Tag Color="TagColor.Info">v1.0.0</Tag>
</AddonTags>

<AddonTags>
    <Tag Color="TagColor.Dark">build</Tag>
    <Tag Color="TagColor.Success">passing</Tag>
</AddonTags>

You can also include a delete tag within an AddonTags group to allow users to remove the entire group or a specific tag.

How to use:

Add a Tag with IsDelete="true" inside the AddonTags container.

This demo shows an addon group with a delete tag.

Example
View Source

Package

<AddonTags>
    <Tag Color="TagColor.Danger">Package</Tag>
    <Tag IsDelete="true" />
</AddonTags>

Grouped addon tags #

The GroupedAddonTags container allows you to display multiple AddonTags groups together, making it easy to present sets of related tag pairs or triplets in a structured layout.

How to use:

Wrap several AddonTags groups inside a GroupedAddonTags container.
Each AddonTags group can contain two or more Tag components, styled as needed.

This demo shows multiple addon tag groups, each representing related information.

Example
View Source

Package BlazorExpress.Bulma

nuget v1.0.0

build passing

<GroupedAddonTags>
    <AddonTags>
        <Tag>Package</Tag>
        <Tag Color="TagColor.Primary">BlazorExpress.Bulma</Tag>
    </AddonTags>
    <AddonTags>
        <Tag Color="TagColor.Dark">nuget</Tag>
        <Tag Color="TagColor.Info">v1.0.0</Tag>
    </AddonTags>
    <AddonTags>
        <Tag Color="TagColor.Dark">build</Tag>
        <Tag Color="TagColor.Success">passing</Tag>
    </AddonTags>
</GroupedAddonTags>

You can also include delete tags within each AddonTags group inside a GroupedAddonTags container, allowing users to remove individual tag groups.

How to use:

For each AddonTags group, add a Tag with IsDelete="true" to provide a delete action for that group.

This demo shows grouped addon tags with delete buttons for each group.

Example
View Source

Technology

Blazor

Web

Open Source

Community

Demo

<GroupedAddonTags>
    <AddonTags>
        <Tag Color="TagColor.Link">Technology</Tag>
    <Tag IsDelete="true" />
    </AddonTags>
    <AddonTags>
        <Tag Color="TagColor.Link">Blazor</Tag>
    <Tag IsDelete="true" />
    </AddonTags>
    <AddonTags>
        <Tag Color="TagColor.Link">Web</Tag>
    <Tag IsDelete="true" />
    </AddonTags>
    <AddonTags>
        <Tag Color="TagColor.Link">Open Source</Tag>
    <Tag IsDelete="true" />
    </AddonTags>
    <AddonTags>
        <Tag Color="TagColor.Link">Community</Tag>
    <Tag IsDelete="true" />
    </AddonTags>
    <AddonTags>
        <Tag Color="TagColor.Link">Demo</Tag>
    <Tag IsDelete="true" />
    </AddonTags>
</GroupedAddonTags>

Tag

The Tag component is a small label to insert anywhere.

How it works #

Colors #

Sizes #

Rounded #

Hover state #

Delete #

List of tags #

Addon tags #

Grouped addon tags #

The `Tag` component is a small label to insert anywhere.