Tag - bit BlazorUI

Tag

Chip

Tag component provides a visual representation of an attribute, person, or asset.

Usage

Basic

Basic tag

<BitTag Text="Basic tag" />

Variant

The tag offers three variants: Fill (default), Outline, and Text.

Fill

Outline

Text

<BitTag Text="Fill" Variant="BitVariant.Fill" />
<BitTag Text="Outline" Variant="BitVariant.Outline" />
<BitTag Text="Text" Variant="BitVariant.Text" />

Icon

Display an icon within a BitTag to represent its content visually.

Calendar icon

<BitTag Text="Calendar icon" IconName="@BitIconName.Calendar" />

Dismiss

Use the OnDismiss feature in BitTag to provide a close button for the tag content.

Dismiss me

@if (isDismissed is false)
{
    <BitTag IconName="@BitIconName.AlarmClock" Text="Dismiss me" OnDismiss="() => isDismissed = true" />
}

<BitButton IsEnabled="isDismissed" Variant="BitVariant.Outline" OnClick="() => isDismissed = false">
    Dismissed, click to reset
</BitButton>
@code {
    private bool isDismissed;
}

Color

Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.

Primary

Secondary

Tertiary

Info

Success

Warning

SevereWarning

Error

PrimaryBackground

SecondaryBackground

TertiaryBackground

PrimaryForeground

SecondaryForeground

TertiaryForeground

PrimaryBorder

SecondaryBorder

TertiaryBorder

<BitTag Text="Primary" IconName="@BitIconName.Calendar" Color="BitColor.Primary" Variant="BitVariant.Fill" />
<BitTag Text="Primary" IconName="@BitIconName.Calendar" Color="BitColor.Primary" Variant="BitVariant.Outline" />
<BitTag Text="Primary" IconName="@BitIconName.Calendar" Color="BitColor.Primary" Variant="BitVariant.Text" />

<BitTag Text="Secondary" IconName="@BitIconName.Calendar" Color="BitColor.Secondary" Variant="BitVariant.Fill" />
<BitTag Text="Secondary" IconName="@BitIconName.Calendar" Color="BitColor.Secondary" Variant="BitVariant.Outline" />
<BitTag Text="Secondary" IconName="@BitIconName.Calendar" Color="BitColor.Secondary" Variant="BitVariant.Text" />

<BitTag Text="Tertiary" IconName="@BitIconName.Calendar" Color="BitColor.Tertiary" Variant="BitVariant.Fill" />
<BitTag Text="Tertiary" IconName="@BitIconName.Calendar" Color="BitColor.Tertiary" Variant="BitVariant.Outline" />
<BitTag Text="Tertiary" IconName="@BitIconName.Calendar" Color="BitColor.Tertiary" Variant="BitVariant.Text" />

<BitTag Text="Info" IconName="@BitIconName.Calendar" Color="BitColor.Info" Variant="BitVariant.Fill" />
<BitTag Text="Info" IconName="@BitIconName.Calendar" Color="BitColor.Info" Variant="BitVariant.Outline" />
<BitTag Text="Info" IconName="@BitIconName.Calendar" Color="BitColor.Info" Variant="BitVariant.Text" />

<BitTag Text="Success" IconName="@BitIconName.Calendar" Color="BitColor.Success" Variant="BitVariant.Fill" />
<BitTag Text="Success" IconName="@BitIconName.Calendar" Color="BitColor.Success" Variant="BitVariant.Outline" />
<BitTag Text="Success" IconName="@BitIconName.Calendar" Color="BitColor.Success" Variant="BitVariant.Text" />

<BitTag Text="Warning" IconName="@BitIconName.Calendar" Color="BitColor.Warning" Variant="BitVariant.Fill" />
<BitTag Text="Warning" IconName="@BitIconName.Calendar" Color="BitColor.Warning" Variant="BitVariant.Outline" />
<BitTag Text="Warning" IconName="@BitIconName.Calendar" Color="BitColor.Warning" Variant="BitVariant.Text" />

<BitTag Text="SevereWarning" IconName="@BitIconName.Calendar" Color="BitColor.SevereWarning" Variant="BitVariant.Fill" />
<BitTag Text="SevereWarning" IconName="@BitIconName.Calendar" Color="BitColor.SevereWarning" Variant="BitVariant.Outline" />
<BitTag Text="SevereWarning" IconName="@BitIconName.Calendar" Color="BitColor.SevereWarning" Variant="BitVariant.Text" />

<BitTag Text="Error" IconName="@BitIconName.Calendar" Color="BitColor.Error" Variant="BitVariant.Fill" />
<BitTag Text="Error" IconName="@BitIconName.Calendar" Color="BitColor.Error" Variant="BitVariant.Outline" />
<BitTag Text="Error" IconName="@BitIconName.Calendar" Color="BitColor.Error" Variant="BitVariant.Text" />

<BitTag Text="PrimaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryBackground" Variant="BitVariant.Fill" />&nbsp;
<BitTag Text="PrimaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryBackground" Variant="BitVariant.Outline" />&nbsp;
<BitTag Text="PrimaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryBackground" Variant="BitVariant.Text" />

<BitTag Text="SecondaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryBackground" Variant="BitVariant.Fill" />&nbsp;
<BitTag Text="SecondaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryBackground" Variant="BitVariant.Outline" />&nbsp;
<BitTag Text="SecondaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryBackground" Variant="BitVariant.Text" />

<BitTag Text="TertiaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryBackground" Variant="BitVariant.Fill" />&nbsp;
<BitTag Text="TertiaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryBackground" Variant="BitVariant.Outline" />&nbsp;
<BitTag Text="TertiaryBackground" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryBackground" Variant="BitVariant.Text" />

<BitTag Text="PrimaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryForeground" Variant="BitVariant.Fill" />&nbsp;
<BitTag Text="PrimaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryForeground" Variant="BitVariant.Outline" />&nbsp;
<BitTag Text="PrimaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryForeground" Variant="BitVariant.Text" />

<BitTag Text="SecondaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryForeground" Variant="BitVariant.Fill" />&nbsp;
<BitTag Text="SecondaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryForeground" Variant="BitVariant.Outline" />&nbsp;
<BitTag Text="SecondaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryForeground" Variant="BitVariant.Text" />

<BitTag Text="TertiaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryForeground" Variant="BitVariant.Fill" />&nbsp;
<BitTag Text="TertiaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryForeground" Variant="BitVariant.Outline" />&nbsp;
<BitTag Text="TertiaryForeground" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryForeground" Variant="BitVariant.Text" />
<br />
<BitTag Text="PrimaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryBorder" Variant="BitVariant.Fill" />&nbsp;
<BitTag Text="PrimaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryBorder" Variant="BitVariant.Outline" />&nbsp;
<BitTag Text="PrimaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.PrimaryBorder" Variant="BitVariant.Text" />

<BitTag Text="SecondaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryBorder" Variant="BitVariant.Fill" />&nbsp;
<BitTag Text="SecondaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryBorder" Variant="BitVariant.Outline" />&nbsp;
<BitTag Text="SecondaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.SecondaryBorder" Variant="BitVariant.Text" />

<BitTag Text="TertiaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryBorder" Variant="BitVariant.Fill" />&nbsp;
<BitTag Text="TertiaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryBorder" Variant="BitVariant.Outline" />&nbsp;
<BitTag Text="TertiaryBorder" IconName="@BitIconName.Calendar" Color="BitColor.TertiaryBorder" Variant="BitVariant.Text" />

Size

Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.

Small

Medium

Large

<BitTag Text="Small" IconName="@BitIconName.Calendar" Size="BitSize.Small" Variant="BitVariant.Fill" />
<BitTag Text="Small" IconName="@BitIconName.Calendar" Size="BitSize.Small" Variant="BitVariant.Outline" />
<BitTag Text="Small" IconName="@BitIconName.Calendar" Size="BitSize.Small" Variant="BitVariant.Text" />

<BitTag Text="Medium" IconName="@BitIconName.Calendar" Size="BitSize.Medium" Variant="BitVariant.Fill" />
<BitTag Text="Medium" IconName="@BitIconName.Calendar" Size="BitSize.Medium" Variant="BitVariant.Outline" />
<BitTag Text="Medium" IconName="@BitIconName.Calendar" Size="BitSize.Medium" Variant="BitVariant.Text" />

<BitTag Text="Large" IconName="@BitIconName.Calendar" Size="BitSize.Large" Variant="BitVariant.Fill" />
<BitTag Text="Large" IconName="@BitIconName.Calendar" Size="BitSize.Large" Variant="BitVariant.Outline" />
<BitTag Text="Large" IconName="@BitIconName.Calendar" Size="BitSize.Large" Variant="BitVariant.Text" />

Template

Customize the content inside BitTag using a template with different elements and components.

Custom content

<BitTag>
    <BitStack Horizontal Gap="0.5rem" Style="padding-inline: 0.5rem;">
        <BitLabel>Custom content</BitLabel>
        <BitRollerLoading CustomSize="32" Color="BitColor.Tertiary" />
    </BitStack>
</BitTag>

External Icons

Use icons from external libraries like FontAwesome and Bootstrap Icons with the Icon parameter and BitIconInfo.

FontAwesome:

House

Heart

GitHub

Rocket

Bootstrap:

House

Heart

GitHub

Gear

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />

<BitTag Text="House" Icon="@("fa-solid fa-house")" />

<BitTag Text="Heart" Icon="@BitIconInfo.Css("fa-solid fa-heart")" />

<BitTag Text="GitHub" Icon="@BitIconInfo.Fa("fa-brands fa-github")" />

<BitTag Text="Rocket" Icon="@BitIconInfo.Fa("solid rocket")" />


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />

<BitTag Text="House" Icon="@("bi bi-house-fill")" />

<BitTag Text="Heart" Icon="@BitIconInfo.Css("bi bi-heart-fill")" />

<BitTag Text="GitHub" Icon="@BitIconInfo.Bi("github")" />

<BitTag Text="Gear" Icon="@BitIconInfo.Bi("gear-fill")" />

Style & Class

Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.

Component's Style & Class:

Styled Tag

Classed Tag

Styles & Classes:

Styles

Classes

<style>
    .custom-class {
        border-radius: 0.25rem;
        box-shadow: aqua 0 0 0.5rem;
    }

    .custom-root {
        color: mediumpurple;
        border-radius: 0.5rem;
        border-color: mediumpurple;
        background-color: transparent;
        box-shadow: mediumpurple 0 0 0.5rem;
    }

    .custom-icon {
        font-size: 1.25rem;
        font-weight: bolder;
    }
</style>


<BitTag Text="Styled Tag"
        IconName="@BitIconName.People"
        Style="border-radius: 1rem; font-weight:bold" />

<BitTag Text="Classed Tag"
        IconName="@BitIconName.People"
        Class="custom-class" Variant="BitVariant.Outline" />


<BitTag Text="Styles"
        IconName="@BitIconName.People"
        Styles="@(new() { Root = "border-color: red; background-color: transparent;",
                          Text = "color: tomato; font-weight: bold;",
                          Icon = "color: tomato;" })" />

<BitTag Text="Classes"
        IconName="@BitIconName.People"
        Classes="@(new() { Root = "custom-root",
                           Icon = "custom-icon" })" />

API

BitTag parameters

Name	Type	Default value	Description
ChildContent	RenderFragment?	null	Child content of component, the content that the tag will apply to.
Classes	BitTagClassStyles?	null	Custom CSS classes for different parts of the tag.
Color	BitColor?	null	The general color of the tag.
DismissIcon	BitIconInfo?	null	Gets or sets the icon to use for the dismiss button using custom CSS classes for external icon libraries. Takes precedence over DismissIconName when both are set. Defaults to the built-in Cancel icon when neither is set.
DismissIconName	string?	null	Gets or sets the name of the icon to use for the dismiss button from the built-in Fluent UI icons. Defaults to Cancel when not set. For external icon libraries, use DismissIcon instead.
Icon	BitIconInfo?	null	Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set.
IconName	string?	null	Gets or sets the name of the icon to display from the built-in Fluent UI icons. For external icon libraries, use Icon instead.
OnClick	EventCallback<MouseEventArgs>		Click event handler of the tag.
OnDismiss	EventCallback<MouseEventArgs>		Dismiss button click event, if set the dismiss icon will show up.
Reversed	bool	false	Reverses the direction flow of the content of the tag.
Size	BitSize?	null	The size of the tag.
Styles	BitTagClassStyles?	null	Custom CSS styles for different parts of the tag.
Text	string?	null	The text of the tag.
Variant	BitVariant?	null	The visual variant of the tag.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	Gets or sets the accessible label for the component, used by assistive technologies.
Class	string?	null	Gets or sets the CSS class name(s) to apply to the rendered element.
Dir	BitDir?	null	Gets or sets the text directionality for the component's content.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id	string?	null	Gets or sets the unique identifier for the component's root element.
IsEnabled	bool	true	Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style	string?	null	Gets or sets the CSS style string to apply to the rendered element.
TabIndex	string?	null	Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility	BitVisibility	BitVisibility.Visible	Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement	ElementReference		Gets the reference to the root HTML element associated with this component.

BitTagClassStyles properties

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitTag.
Text	string?	null	Custom CSS classes/styles for the text of the BitTag.
Icon	string?	null	Custom CSS classes/styles for the icon of the BitTag.
DismissButton	string?	null	Custom CSS classes/styles for the dismiss button of the BitTag.
DismissIcon	string?	null	Custom CSS classes/styles for the dismiss icon of the BitTag.

BitIconInfo properties

Name	Type	Default value	Description
Name	string?	null	Gets or sets the name of the icon.
BaseClass	string?	null	Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
Prefix	string?	null	Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty.

BitColor enum

Name	Value	Description
Primary	0	Info Primary general color.
Secondary	1	Secondary general color.
Tertiary	2	Tertiary general color.
Info	3	Info general color.
Success	4	Success general color.
Warning	5	Warning general color.
SevereWarning	6	SevereWarning general color.
Error	7	Error general color.

BitSize enum

Name	Value	Description
Small	0	The small size.
Medium	1	The medium size.
Large	2	The large size.

BitVariant enum

Name	Value	Description
Fill	0	Fill styled variant.
Outline	1	Outline styled variant.
Text	2	Text styled variant.

BitVisibility enum

Name	Value	Description
Visible	0	The content of the component is visible.
Hidden	1	The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed	2	The component is hidden (display:none).

BitDir enum

Name	Value	Description
Ltr	0	Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl	1	Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto	2	Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.

On this page

Tag Chip

Chip

Tag component provides a visual representation of an attribute, person, or asset.

Usage

Basic

Variant

Icon

Dismiss

Color

Size

Template

External Icons

Style & Class

API

BitTag parameters

Name

Type

Default value

Description

BitComponentBase parameters

Name

Type

Default value

Description

BitComponentBase public members

Name

Type

Default value

Description

BitTagClassStyles properties

Name

Type

Default value

Description

BitIconInfo properties

Name

Type

Default value

Description

BitColor enum

Name

Value

Description

BitSize enum

Name

Value

Description

BitVariant enum

Name

Value

Description

BitVisibility enum

Name

Value

Description

BitDir enum

Name

Value

Description

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.

Tag

Chip