- bit BlazorUI
Home Docs

Tag

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

Usage

Basic
The tag offers three appearance options: Primary (default), Standard, and Text.

Text


Text


Text
Primary tag
Primary tags are attention-grabbing, featuring a filled appearance. They're designed for essential actions at the core of your application.

Primary
Disabled
Standard tag
Standard tags offer a moderate level of emphasis, suitable for important actions that aren't central to the application. They serve as a middle ground between Text tags and the more prominent Primary tags, providing flexibility in emphasis.

Standard
Disabled
Text tag
Text tags are best suited for understated actions, serving as a less prominent choice in various interface elements.

Text
Disabled
Icon
Text
Dismiss
Dismiss me


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

Info
Info
Info

Success
Success
Success

Warning
Warning
Warning

SevereWarning
SevereWarning
SevereWarning

Error
Error
Error
Template
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:

Primary
Standard

Implementation

BitTag parameters
Name
Type
Default value
Description
Appearance BitAppearance BitAppearance.Primary The appearance of tag, Possible values: Primary | Standard | Text
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 BitTag.
Color BitColor? null The color of the tag.
IconName string? null Sets the Icon to use in the tag.
OnClick EventCallback<MouseEventArgs> Click event handler of the tag.
OnDismiss EventCallback<MouseEventArgs> Dismiss button click event, if set the dismiss icon will show up.
Text string? null The text of the tag.
Styles BitTagClassStyles? null Custom CSS styles for different parts of the BitTag.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitTagClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the BitTag.
Content string? null Custom CSS classes/styles for the content 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.
BitAppearance enum
Name
Value
Description
Primary 0 The appearance for primary actions that are high-emphasis.
Standard 1 The appearance for important actions that are medium-emphasis.
Text 2 The appearance for less-pronounced actions.
BitColor enum
Name
Value
Description
Info 0 Info styled tag.
Success 1 Success styled tag.
Warning 2 Warning styled tag.
SevereWarning 3 Severe Warning styled tag.
Error 4 Error styled tag.
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.