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