Skip to content
# Link **Also known as:** Anchor ## Description Links lead to another part of an app, other pages, or help articles. They can also be used to initiate commands. BitLink renders an anchor when an Href is given and a button when it is not, so a link that runs a command still answers the keyboard like a button while keeping the link look. An Href starting with # is the third case: an in-page link that scrolls its target into view and moves the focus with it. A new-tab link is hardened on its own, with a noopener rel and an announcement that it opens a new tab. ## Parameters | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | AllowDisabledFocus | `bool` | false | Keeps the disabled link focusable and discoverable by assistive technologies, conveying the disabled state using the aria-disabled attribute. | | AriaCurrent | `BitNavAriaCurrent?` | null | Reports the link as the current item of the set it belongs to, through the aria-current attribute. Only one link of a set is ever the current one. | | AriaDescription | `string?` | null | A longer description of the link for the benefit of screen readers, rendered as visually hidden text the link points at through aria-describedby. It is read out after the name rather than as part of it. | | AutoFocus | `bool` | false | Gives the link the focus as soon as it is rendered, through the autofocus attribute. The browser honors it once per document, on the first element that asks for it. | | ChildContent | `RenderFragment?` | null | The content of the link, can be any custom tag or a text. | | Color | `BitColor?` | null | The general color of the link. | | Download | `string?` | null | The value of the download attribute of the link when the Href parameter is provided. Instructs the browser to download the linked resource instead of navigating to it, using the provided value (if any) as the suggested file name. | | Href | `string?` | null | URL the link points to. If provided, the component renders an anchor tag, otherwise a button. A value starting with the # character makes the link smooth-scroll the element with that id into view and move the focus to it. | | Icon | `BitIconInfo?` | null | The icon rendered beside the link content, using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. | | IconName | `string?` | null | The name of the icon rendered beside the link content, from the built-in Fluent UI icons. The glyph is decorative and hidden from assistive technologies. | | IconPosition | `BitIconPosition?` | null | The position of the icon relative to the link content. The icon goes in front of the text by default; End puts it after the text. | | NewTabHint | `string?` | null | Replaces the text a new-tab link is announced with. A _blank link carries "(opens in a new tab)" as visually hidden text after its content, or appended to its AriaLabel when it has one. An empty value takes the announcement off. | | NoColor | `bool` | false | Removes applying any foreground color to the link content, letting it keep its own color. | | NoNewTabHint | `bool` | false | Stops a new-tab link from announcing that it opens in a new tab. Only set it where the page already says so. | | NoUnderline | `bool` | false | Styles the link to have no underline at any state. It wins over Underlined when both are set. | | OnClick | `EventCallback<MouseEventArgs>` | | Callback for when the link is clicked. It is invoked in every render mode of the link: on anchor links it runs alongside the navigation, and on button links (no Href) it is the sole click action. | | PreventDefault | `bool` | false | Suppresses the navigation a click on the link would otherwise perform, leaving OnClick as the whole of what the click does. The anchor keeps its Href, so a middle click and "copy link address" still reach the destination. | | Rel | `BitLinkRels?` | null | If Href provided, specifies the relationship between the current document and the linked document. Ignored for empty or hash-only (#) hrefs. When Target is _blank and no opener-related rel (NoOpener, NoReferrer or Opener) is provided, noopener is added automatically. | | Size | `BitSize?` | null | Sets the preset size of the link text. With nothing set the link takes the font size of whatever it sits in. | | StopPropagation | `bool` | false | If true, stops the propagation of the click event to the parent elements. Useful when the link is placed inside clickable containers like rows or cards. | | Target | `string?` | null | If Href provided, specifies how to open the link (e.g. _blank to open it in a new tab). When set to _blank and no opener-related Rel is provided, noopener is added to the rel attribute automatically. | | Title | `string?` | null | The tooltip to show when the mouse is placed on the link. Neither touch nor the keyboard reaches it, so nothing the reader has to have belongs only here. | | Underlined | `bool` | false | Styles the link with a fixed underline at all states. NoUnderline wins over it when both are set. | | 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. | | 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. | | 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. | ## Public Members | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | FocusAsync | `ValueTask` | | Gives focus to the root element of the link. A disabled link is only focusable when AllowDisabledFocus keeps it in the tab order. | | FocusAsync(bool preventScroll) | `ValueTask` | | Gives focus to the root element of the link. Passing true keeps the page scrolled where it is; passing false lets the browser scroll the link into view. | | 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 ### 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. | | 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. | ### 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. | ### BitIconPosition Enum | Name | Value | Description | | :--- | :--- | :---------- | | Start | 0 | Icon renders before the content (default). | | End | 1 | Icon renders after the content. | ### BitSize Enum | Name | Value | Description | | :--- | :--- | :---------- | | Small | 0 | The small size. | | Medium | 1 | The medium size. | | Large | 2 | The large size. | ### 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 ### BitLinkTarget Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | Self | `` | _self | The current browsing context. (Default) | | Blank | `` | _blank | Usually a new tab, but users can configure browsers to open a new window instead. | | Parent | `` | _parent | The parent browsing context of the current one. If no parent, behaves as _self. | | Top | `` | _top | The topmost browsing context. To be specific, this means the 'highest' context that's an ancestor of the current one. If no ancestors, behaves as _self. | | UnfencedTop | `` | _unfencedTop | Allows embedded fenced frames to navigate the top-level frame. | ## Examples \n**Basic**: ```razor Basic Link Disabled Link ``` \n**Underlined**: ```razor Underlined link ``` \n**NoUnderline**: ```razor NoUnderline link ``` \n**Icon**: ```razor Link with a leading icon Link with a trailing icon Icon on an underlined link ``` \n**Target**: ```razor Blank target link Parent target link Self target link Top target link ``` \n**New tab announcement**: ```razor Announced as opening in a new tab Announced with a translated sentence Opens in a new tab (said in the text already) ``` \n**Download**: ```razor Download the bit logo Download with a custom file name ``` \n**Title**: ```razor Hover to see the full address ``` \n**AriaDescription**: ```razor Download the brand guidelines ``` \n**OnClick**: ```razor Click to navigate to the bit platform GitHub repo! Link with both Href and OnClick
OnClick count: @clickCount
A clickable container (clicked @containerClickCount times): Link with StopPropagation (clicked @linkClickCount times)
``` ```csharp [Inject] private NavigationManager Navigation { get; set; } = default!; private int clickCount; private int linkClickCount; private int containerClickCount; private void HandleOnClick() { Navigation.NavigateTo("https://github.com/bitfoundation/bitplatform"); } ``` \n**PreventDefault**: ```razor Ask before leaving
@guardMessage
``` ```csharp private string? guardMessage; private void HandleGuardedClick() { // The browser did not navigate, so what happens next is entirely up to this handler: // confirm, save a draft, track the click, and then navigate from here if it should happen. guardMessage = "The navigation was suppressed. This is where a confirmation would go."; } ``` \n**Navigate to elements**: ```razor Go To End of this Article
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape. Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and inspirations will be built. Soon, these lines will transform into narratives that provoke thought, spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty in potential the quiet magic of beginnings, where everything is still to come, and the possibilities are boundless. This space is yours to craft, yours to shape, yours to bring to life.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
Imagine this space as a window into the future empty yet alive with the energy of endless possibilities. These words stand as temporary guides, placeholders that whisper of what is to come. They hold the promise of stories waiting to unfold, ideas eager to take shape, and connections that will soon emerge to inspire and resonate. This is not an empty page; it is a canvas, rich with potential and ready to transform into something meaningful.
For now, these lines are here to remind you of the beauty of beginnings. They are the quiet before the symphony, the foundation upon which your creativity will build. Soon, this space will hold your thoughts, your visions, and your voice a reflection of who you are and what you wish to share with the world. Every sentence will carry purpose, every word will invite others to connect, to think, to feel. So take a moment to dream, to imagine what this blank slate can become. Whether it’s a story, an idea, or a message that matters, this is your starting point. The possibilities are endless, and the journey begins now.
Go To Start of this Article ``` \n**Rel**: ```razor Link with a rel attribute (nofollow) Link with a rel attribute (nofollow & noreferrer) Link with a rel attribute (sponsored & ugc) Blank target link with an automatic noopener rel ``` \n**AllowDisabledFocus**: ```razor Disabled link (skipped by Tab) Disabled link with AllowDisabledFocus (focusable) ``` \n**AriaCurrent**: ```razor Link (this page) Button Image ``` \n**NoColor**: ```razor Link with default color! this text color is coming from the link itself. Link with NoColor! ``` \n**Color**: ```razor Primary Color Link (default) Secondary Color Link Tertiary Color Link Info Color Link Success Color Link Warning Color Link SevereWarning Color Link Error Color Link
PrimaryBackground Color Link SecondaryBackground Color Link TertiaryBackground Color Link
PrimaryForeground Color Link SecondaryForeground Color Link TertiaryForeground Color Link PrimaryBorder Color Link SecondaryBorder Color Link TertiaryBorder Color Link Primary (default) Secondary Tertiary Info Success Warning SevereWarning Error
PrimaryBackground SecondaryBackground TertiaryBackground
PrimaryForeground SecondaryForeground TertiaryForeground PrimaryBorder SecondaryBorder TertiaryBorder ``` \n**External Icons**: ```razor bit platform on GitHub Opens in a new tab bit platform on GitHub Opens in a new tab ``` \n**Size**: ```razor Small link Medium link Large link The icon follows the size ``` \n**Style & Class**: ```razor Link with style Link with class ``` \n**RTL**: ```razor
پیوند راست به چپ پیوند راست به چپ با آیکن
```