- bit BlazorUI
  • Layouts
  • Lists
  • Navs
  • Notifications
  • Progress
  • Surfaces
  • Utilities
  • Extras
  • Iconography
  • Theming
  • Tag

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

    Usage

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

    Fill
     
    Outline
     
    Text
    Icon
    Display an icon within a BitTag to represent its content visually.

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

    Dismiss me


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

    Primary
     
    Primary
     
    Primary


    Secondary
     
    Secondary
     
    Secondary


    Tertiary
     
    Tertiary
     
    Tertiary


    Info
     
    Info
     
    Info


    Success
     
    Success
     
    Success


    Warning
     
    Warning
     
    Warning


    SevereWarning
     
    SevereWarning
     
    SevereWarning


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

    Small
     
    Small
     
    Small


    Medium
     
    Medium
     
    Medium


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

    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

    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.
    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.
    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 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.
    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.
    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.
    • On this page