Tags

The Tag component is a small label to insert anywhere.

API Documentation

Example #

Tag label
RAZOR
<Tag>Tag label</Tag>

Colors #

Black Dark Light White Primary Link Info Success Warning Danger
RAZOR
<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>
Primary Link Info Success Warning Danger
RAZOR
<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 #

Normal Medium Large
RAZOR
<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>
Black Dark Light White Primary Link Info Success Warning Danger
RAZOR
<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>
Black Dark Light White Primary Link Info Success Warning Danger
RAZOR
<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>
Black Dark Primary Link Info Success Warning Danger
RAZOR
<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 #

Black Dark Light White Primary Link Info Success Warning Danger
RAZOR
<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 #

Black Dark Light White Primary Link Info Success Warning Danger
RAZOR
<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 #

RAZOR
<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" />
RAZOR
<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 #

One Two Three
RAZOR
<Tags>
    <Tag>One</Tag>
    <Tag>Two</Tag>
    <Tag>Three</Tag>
</Tags>
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 #

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>
Package 
<AddonTags>
    <Tag Color="TagColor.Danger">Package</Tag>
    <Tag IsDelete="true" />
</AddonTags>

Grouped addon tags #

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>
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>
If you like BlazorExpress.Bulma, give it a star on GitHub!