# Tag
**Also known as:** Chip
## Description
Tag is the compact chip for an attribute, a person or an asset. It takes a label and a second line, glyphs or a picture at either end, and three variants, sizes and shapes across the color palette. A dismiss handler grows a close button that also answers Delete and Backspace; a click handler or a URL makes it a real button or anchor; a bound Selected makes it a filter chip that reports aria-pressed.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AllowDisabledFocus | `bool` | false | Keeps a disabled button, link or dismiss button in the tab order, reporting aria-disabled instead of disabled. |
| AriaCurrent | `BitNavAriaCurrent` | BitNavAriaCurrent.True | The aria-current value a selected link tag reports. A toggle tag reports aria-pressed instead. |
| AriaDescription | `string?` | null | A description screen readers read after the name, through a visually hidden element referenced by aria-describedby. |
| ChildContent | `RenderFragment?` | null | Custom content in place of Text and SecondaryText; the icons, the image and the checkmark still render around it. |
| Classes | `BitTagClassStyles?` | null | Custom CSS classes for different parts of the tag. |
| Color | `BitColor?` | null | The general color of the tag. An explicit value wins over the --bit-Tag-* color variables for every color its role paints; left unset, the tag is primary unless they say otherwise. |
| DefaultSelected | `bool?` | null | The initial selection of a tag that keeps its own state (an uncontrolled toggle). |
| DismissIcon | `BitIconInfo?` | null | The dismiss glyph from an external icon library. Takes precedence over DismissIconName. |
| DismissIconName | `string?` | null | The dismiss glyph from the built-in icons. Defaults to Cancel. |
| DismissLabel | `string?` | null | The accessible name and tooltip of the dismiss button. Defaults to DismissLabelFormat applied to Text (or AriaLabel), else "Dismiss". |
| DismissLabelFormat | `string?` | null | The format of the dismiss button name, where {0} is the Text. Defaults to "Remove {0}"; use it to reword or translate. |
| Download | `string?` | null | Downloads the Href instead of navigating to it, suggesting this file name (empty keeps the server's). |
| FullWidth | `bool` | false | Stretches the tag to the width of its container. |
| HideSelectedIcon | `bool` | false | Hides the checkmark of a selected tag. |
| Href | `string?` | null | Makes the tag a link to this URL. A disabled link drops the href and leaves the tab order. |
| Icon | `BitIconInfo?` | null | The leading glyph from an external icon library. Takes precedence over IconName. |
| IconAlt | `string?` | null | The alt text of the IconUrl picture, which is decorative (empty alt) by default. |
| IconName | `string?` | null | The leading glyph from the built-in icons. |
| IconUrl | `string?` | null | A picture shown in place of the icon, cropped to a circle. Ignored while Icon or IconName is set. |
| NewTabHint | `string?` | null | The announcement of a Target="_blank" link, "(opens in a new tab)" by default; an empty value removes it. |
| NoNewTabHint | `bool` | false | Stops a Target="_blank" link from announcing that it opens a new tab - only for where a visible label or heading already says so. |
| NoWrap | `bool` | false | Keeps the text on one line, ending it with an ellipsis where it does not fit. |
| OnChange | `EventCallback<bool>` | | Called after Selected changes. Setting it makes the tag a toggle (except a link, whose click navigates). |
| OnChanging | `EventCallback<BitTagChangeArgs>` | | Called (and awaited) before Selected changes; set Cancel on the args to keep the current state. |
| OnClick | `EventCallback<MouseEventArgs>` | | Called on click; setting it makes the tag a button. |
| OnDismiss | `EventCallback<MouseEventArgs>` | | Called on dismiss; setting it shows the dismiss button. Delete and Backspace trigger it too. |
| PrefixTemplate | `RenderFragment?` | null | Custom markup added at the start of the tag, before the icon. |
| Rel | `BitLinkRels?` | null | The rel of the link. A _blank link gets noopener added to it, unless it already says NoOpener, NoReferrer or Opener. |
| Reversed | `bool` | false | Mirrors the order of the whole row, dismiss button included. |
| SecondaryIcon | `BitIconInfo?` | null | The trailing glyph from an external icon library. Takes precedence over SecondaryIconName. |
| SecondaryIconName | `string?` | null | The trailing glyph from the built-in icons, after the label and before the dismiss button. |
| SecondaryText | `string?` | null | A smaller second line under the Text. |
| Selected | `bool` | false | The selected state: selected colors and a checkmark. Binding it makes the tag a toggle reporting aria-pressed (aria-current on a link). |
| SelectedChanged | `EventCallback<bool>` | | Called when Selected changes; what @bind-Selected uses. |
| SelectedIcon | `BitIconInfo?` | null | The checkmark glyph from an external icon library. Takes precedence over SelectedIconName. |
| SelectedIconName | `string?` | null | The checkmark glyph from the built-in icons. Defaults to Accept. |
| Shape | `BitShape?` | null | The corner shape of the tag. A tag takes its box from its own content, so Circle has no proportions to impose and rounds the ends fully, the same as Pill. An explicit value wins over --bit-Tag-radius; left unset, the tag takes the chip corner unless it says otherwise. |
| Size | `BitSize?` | null | The size of the tag. An explicit value wins over the --bit-Tag-* size variables; left unset, the tag is medium unless they say otherwise. |
| StopPropagation | `bool` | false | Stops the click from reaching the parent elements. |
| Styles | `BitTagClassStyles?` | null | Custom CSS styles for different parts of the tag. |
| SuffixTemplate | `RenderFragment?` | null | Custom markup added at the end of the tag, before the dismiss button. |
| Target | `string?` | null | Where the link opens, e.g. _blank. |
| Text | `string?` | null | The text of the tag. |
| Title | `string?` | null | The native tooltip of the tag, e.g. the full text behind a NoWrap ellipsis. |
| Variant | `BitVariant?` | null | The visual variant of the tag. |
| 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. |
| Disabled | `bool` | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| 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. An attribute written on the component wins over an entry of the same name. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| 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. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| FocusAsync | `ValueTask` | | Focuses the tag's button or link, else its dismiss button, else the tag itself (which needs a TabIndex). |
| 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. |
## Enums
### BitNavAriaCurrent Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Page | 0 | Represents the current page within a set of pages. |
| Step | 1 | Represents the current step within a process. |
| Location | 2 | Represents the current location within an environment or context. |
| Date | 3 | Represents the current date within a collection of dates. |
| Time | 4 | Represents the current time within a set of times. |
| True | 5 | Represents the current item within a set, without saying which kind of set it is. |
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | 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. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitShape Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Rounded | 0 | The corner radius the current theme gives to this kind of surface, which is what most components draw unless something says otherwise. |
| Square | 1 | Sharp corners with no radius at all, for content that meets its container edge to edge. |
| Pill | 2 | Fully rounded ends, whatever the theme says: a pill where the box is wider than it is tall, and a circle where the box is square. |
| Circle | 3 | A true circle, which takes its diameter from whichever of the height and the width is set rather than leaving the proportions of the box alone. It is the only value that changes the size of what it draws. |
### 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. |
### BitLinkRels Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Alternate | 1 | Provides a link to an alternate representation of the document. (i.e. print page, translated or mirror) |
| Author | 2 | Provides a link to the author of the document. |
| Bookmark | 4 | Permanent URL used for bookmarking. |
| External | 8 | Indicates that the referenced document is not part of the same site as the current document. |
| Help | 16 | Provides a link to a help document. |
| License | 32 | Provides a link to licensing information for the document. |
| Next | 64 | Provides a link to the next document in the series. |
| NoFollow | 128 | Links to an unendorsed document, like a paid link. ("NoFollow" is used by Google, to specify that the Google search spider should not follow that link) |
| NoOpener | 256 | Requires that any browsing context created by following the hyperlink must not have an opener browsing context. |
| NoReferrer | 512 | Makes the referrer unknown. No referrer header will be included when the user clicks the hyperlink. |
| Prev | 1024 | The previous document in a selection. |
| Search | 2048 | Links to a search tool for the document. |
| Tag | 4096 | A tag (keyword) for the current document. |
| Me | 8192 | Indicates that the linked document represents the person who owns the current content. (used for identity verification) |
| Opener | 16384 | Requires that any browsing context created by following the hyperlink keeps its opener browsing context. (reverses the implicit noopener modern browsers apply to _blank targets) |
| PrivacyPolicy | 32768 | Links to the privacy policy that applies to the current document. (rendered as privacy-policy) |
| Sponsored | 65536 | Marks the link as an advertisement or paid placement, so search engines do not count it as an organic endorsement. |
| TermsOfService | 131072 | Links to the terms of service that apply to the current document. (rendered as terms-of-service) |
| Ugc | 262144 | Marks the link as user-generated content, like forum posts or comments, for search engines. |
### 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. |
## Sub Classes
### 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 element of the BitTag: the anchor or button of a link or clickable tag, a span otherwise. |
| Label | `string?` | null | Custom CSS classes/styles for the label of the BitTag, which is the element holding its text and secondary text. |
| Text | `string?` | null | Custom CSS classes/styles for the text of the BitTag. |
| SecondaryText | `string?` | null | Custom CSS classes/styles for the secondary text of the BitTag. |
| Icon | `string?` | null | Custom CSS classes/styles for the icon of the BitTag. |
| Image | `string?` | null | Custom CSS classes/styles for the image of the BitTag. |
| SecondaryIcon | `string?` | null | Custom CSS classes/styles for the trailing icon of the BitTag, which is rendered after the label. |
| Selected | `string?` | null | Custom CSS classes/styles for the root element of the BitTag while it is selected. |
| SelectedIcon | `string?` | null | Custom CSS classes/styles for the checkmark icon a selected BitTag shows. |
| 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. |
### BitTagChangeArgs Properties
The arguments of the OnChanging callback of the BitTag.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Value | `bool` | | The selection state the tag is about to move to. |
| Cancel | `bool` | false | Set to true to cancel the change and keep the current selection state. |
### 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. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-Tag-color` | Per Variant, from the primary role | Text and glyphs at rest. The Color parameter wins over it. Shared by the three variants: --bit-Tag-fill-color, --bit-Tag-outline-color and --bit-Tag-text-color are read ahead of it. |
| `--bit-Tag-background` | Per Variant, from the primary role | Background at rest. The Color parameter wins over it in Fill; the transparent background of Outline and Text is its alone. Shared by the three variants: --bit-Tag-fill-background, --bit-Tag-outline-background and --bit-Tag-text-background are read ahead of it. |
| `--bit-Tag-border-color` | Per Variant, from the primary role | Rule at rest. The Color parameter wins over it, except over the transparent rule of Text. Shared by the three variants: --bit-Tag-fill-border-color, --bit-Tag-outline-border-color and --bit-Tag-text-border-color are read ahead of it. |
| `--bit-Tag-icon-color` | The text color | Leading, trailing and checkmark glyphs (not the dismiss glyph). Disabled tags ignore it. |
| `--bit-Tag-hover-background` | Per Variant, a step deeper while selected | Background of a hovered clickable content or dismiss button. The Color parameter wins over it in Outline and Text; the overlay a Fill tag hovers with is its alone. Shared by the three variants: --bit-Tag-fill-hover-background, --bit-Tag-outline-hover-background and --bit-Tag-text-hover-background are read ahead of it. |
| `--bit-Tag-active-background` | Per Variant, a step deeper while selected | Background of a pressed clickable content or dismiss button. The Color parameter wins over it in Outline and Text; the overlay a Fill tag is pressed with is its alone. Shared by the three variants: --bit-Tag-fill-active-background, --bit-Tag-outline-active-background and --bit-Tag-text-active-background are read ahead of it. |
| `--bit-Tag-selected-color` | --bit-Tag-color | Text and glyphs of a selected tag. The Color parameter wins over it. Shared by the three variants: --bit-Tag-fill-selected-color, --bit-Tag-outline-selected-color and --bit-Tag-text-selected-color are read ahead of it. |
| `--bit-Tag-selected-background` | Per Variant, from the primary role | Background of a selected tag. The Color parameter wins over it. Shared by the three variants: --bit-Tag-fill-selected-background, --bit-Tag-outline-selected-background and --bit-Tag-text-selected-background are read ahead of it. |
| `--bit-Tag-selected-border-color` | Per Variant, from the primary role | Rule of a selected tag. The Color parameter wins over it, except over the transparent rule of Text. Shared by the three variants: --bit-Tag-fill-selected-border-color, --bit-Tag-outline-selected-border-color and --bit-Tag-text-selected-border-color are read ahead of it. |
| `--bit-Tag-disabled-color` | --bit-clr-pri-dis-text | Text and glyphs of a disabled tag. The Color parameter wins over it. |
| `--bit-Tag-disabled-background` | Per Variant, from the primary role | Background of a disabled tag. The Color parameter wins over it in Fill; the transparent background of Outline and Text is its alone. Shared by the three variants: --bit-Tag-fill-disabled-background, --bit-Tag-outline-disabled-background and --bit-Tag-text-disabled-background are read ahead of it. |
| `--bit-Tag-disabled-border-color` | Per Variant, from the primary role | Rule of a disabled tag. The Color parameter wins over it, except over the transparent rule of Text. Shared by the three variants: --bit-Tag-fill-disabled-border-color, --bit-Tag-outline-disabled-border-color and --bit-Tag-text-disabled-border-color are read ahead of it. |
| `--bit-Tag-fill-color` | --bit-Tag-color | Text and glyphs at rest of a Fill tag alone, read ahead of --bit-Tag-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-fill-background` | --bit-Tag-background | Background at rest of a Fill tag alone, read ahead of --bit-Tag-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-fill-border-color` | --bit-Tag-border-color | Rule at rest of a Fill tag alone, read ahead of --bit-Tag-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-fill-hover-background` | --bit-Tag-hover-background | Background of a hovered clickable content or dismiss button of a Fill tag alone, read ahead of --bit-Tag-hover-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-Tag-fill-active-background` | --bit-Tag-active-background | Background of a pressed clickable content or dismiss button of a Fill tag alone, read ahead of --bit-Tag-active-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-Tag-fill-selected-color` | --bit-Tag-selected-color | Text and glyphs while selected of a Fill tag alone, read ahead of --bit-Tag-selected-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-fill-selected-background` | --bit-Tag-selected-background | Background while selected of a Fill tag alone, read ahead of --bit-Tag-selected-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-fill-selected-border-color` | --bit-Tag-selected-border-color | Rule while selected of a Fill tag alone, read ahead of --bit-Tag-selected-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-fill-disabled-background` | --bit-Tag-disabled-background | Background when disabled of a Fill tag alone, read ahead of --bit-Tag-disabled-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-fill-disabled-border-color` | --bit-Tag-disabled-border-color | Rule when disabled of a Fill tag alone, read ahead of --bit-Tag-disabled-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-outline-color` | --bit-Tag-color | Text and glyphs at rest of an Outline tag alone, read ahead of --bit-Tag-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-outline-background` | --bit-Tag-background | Background at rest of an Outline tag alone, read ahead of --bit-Tag-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-Tag-outline-border-color` | --bit-Tag-border-color | Rule at rest of an Outline tag alone, read ahead of --bit-Tag-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-outline-hover-background` | --bit-Tag-hover-background | Background of a hovered clickable content or dismiss button of an Outline tag alone, read ahead of --bit-Tag-hover-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-outline-active-background` | --bit-Tag-active-background | Background of a pressed clickable content or dismiss button of an Outline tag alone, read ahead of --bit-Tag-active-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-outline-selected-color` | --bit-Tag-selected-color | Text and glyphs while selected of an Outline tag alone, read ahead of --bit-Tag-selected-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-outline-selected-background` | --bit-Tag-selected-background | Background while selected of an Outline tag alone, read ahead of --bit-Tag-selected-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-outline-selected-border-color` | --bit-Tag-selected-border-color | Rule while selected of an Outline tag alone, read ahead of --bit-Tag-selected-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-outline-disabled-background` | --bit-Tag-disabled-background | Background when disabled of an Outline tag alone, read ahead of --bit-Tag-disabled-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-Tag-outline-disabled-border-color` | --bit-Tag-disabled-border-color | Rule when disabled of an Outline tag alone, read ahead of --bit-Tag-disabled-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-text-color` | --bit-Tag-color | Text and glyphs at rest of a Text tag alone, read ahead of --bit-Tag-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-text-background` | --bit-Tag-background | Background at rest of a Text tag alone, read ahead of --bit-Tag-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-Tag-text-border-color` | --bit-Tag-border-color | Rule at rest of a Text tag alone, read ahead of --bit-Tag-border-color so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-Tag-text-hover-background` | --bit-Tag-hover-background | Background of a hovered clickable content or dismiss button of a Text tag alone, read ahead of --bit-Tag-hover-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-text-active-background` | --bit-Tag-active-background | Background of a pressed clickable content or dismiss button of a Text tag alone, read ahead of --bit-Tag-active-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-text-selected-color` | --bit-Tag-selected-color | Text and glyphs while selected of a Text tag alone, read ahead of --bit-Tag-selected-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-text-selected-background` | --bit-Tag-selected-background | Background while selected of a Text tag alone, read ahead of --bit-Tag-selected-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-Tag-text-selected-border-color` | --bit-Tag-selected-border-color | Rule while selected of a Text tag alone, read ahead of --bit-Tag-selected-border-color so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-Tag-text-disabled-background` | --bit-Tag-disabled-background | Background when disabled of a Text tag alone, read ahead of --bit-Tag-disabled-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-Tag-text-disabled-border-color` | --bit-Tag-disabled-border-color | Rule when disabled of a Text tag alone, read ahead of --bit-Tag-disabled-border-color so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-Tag-focus-color` | The text color | Color of the inset focus outline. |
| `--bit-Tag-radius` | --bit-shp-radius-chip | Corner of the tag. The Shape parameter wins over it. |
| `--bit-Tag-border-width` | --bit-shp-brd-width | Width of the rule. |
| `--bit-Tag-shadow` | none | Elevation of the tag, e.g. var(--bit-shd-card) for an elevated chip. |
| `--bit-Tag-min-height` | --bit-siz-chip-md | Smallest height inside the rule; the tag still grows with wrapped text. The Size parameter wins over it. |
| `--bit-Tag-max-width` | 100% | Widest the tag gets before it wraps or, with NoWrap, ellipsizes. |
| `--bit-Tag-padding-x` | Half of --bit-siz-ctrl-pad-x-md | Inline inset of the content and the outer inset of the dismiss button. The Size parameter wins over it. |
| `--bit-Tag-padding-y` | spacing(0.375) | Block inset of the content. The Size parameter wins over it. |
| `--bit-Tag-gap` | spacing(1) | Room between the icon, the label and the other parts of the content. The Size parameter wins over it. |
| `--bit-Tag-font-size` | --bit-tpg-fs-sm | Text size. The Size parameter wins over it. |
| `--bit-Tag-font-weight` | --bit-tpg-font-weight | Text weight (a Text with a SecondaryText under it is semibold). |
| `--bit-Tag-secondary-font-size` | --bit-tpg-fs-xs | Size of the SecondaryText line. The Size parameter wins over it. |
| `--bit-Tag-icon-size` | 1em | Size of every glyph, the dismiss glyph included. |
| `--bit-Tag-image-size` | spacing(2) | Size of the IconUrl picture. The Size parameter wins over it. |
## Examples
\n**Basic**:
```razor
Reset
dismissibleTags = ["Design", "Research", "Docs"];
private readonly Dictionary dismissibleTagRefs = [];
private async Task DismissTag(string tag)
{
var index = dismissibleTags.IndexOf(tag);
dismissibleTags.Remove(tag);
dismissibleTagRefs.Remove(tag);
if (dismissibleTags.Count == 0) return;
// the tag that took its place, or the last one when the end of the list was removed
var next = dismissibleTags[Math.Min(index, dismissibleTags.Count - 1)];
if (dismissibleTagRefs.TryGetValue(next, out var nextRef))
{
await nextRef.FocusAsync();
}
}
private void ResetDismissibleTags()
{
dismissibleTags = ["Design", "Research", "Docs"];
}
```
\n**Click**:
```razor
selectedFilters = ["In progress"];
private void ToggleFilter(string filter, bool selected)
{
if (selected)
{
if (selectedFilters.Contains(filter) is false)
{
selectedFilters.Add(filter);
}
}
else
{
selectedFilters.Remove(filter);
}
}
```
\n**Link**:
```razor
Alex (owner)
Status
AP
24
```
\n**NoWrap & FullWidth**:
```razor
Focus it
A clickable card:
Tag clicks: @clickCount, dismissals: @dismissCount, card clicks: @cardClickCount
```
```csharp
private int clickCount;
private int dismissCount;
private int cardClickCount;
```
\n**Selection**:
```razor
@foreach (var filter in filters)
{
Selected: @(selectedFilters.Count == 0 ? "none" : string.Join(", ", selectedFilters))
Disabled: