Skip to content
BlazorUI

Utilities

Link

Bit.BlazorUIAnchor

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.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

A link only needs an Href and its text, and it takes the font of whatever it sits in, so a link inside a sentence stays the same size and weight as the words around it. A disabled link keeps its place in the layout but loses its href, so it can no longer be navigated or clicked.

Basic Link

Disabled Link

Underlined

By default the underline only appears on hover. The Underlined parameter keeps it visible at all states, maximizing the visual cue that the text is interactive, especially when the link sits inside body text.

Underlined link

NoUnderline

The NoUnderline parameter removes the underline at every state, including hover and active, and wins over Underlined when both are set. Reserve it for places where the surrounding context already marks the text as a link (like a navigation menu), since inside body text color alone is not enough of a cue for every reader.

NoUnderline link

Icon

The IconName parameter puts a glyph beside the link text, normalized back to the size of that text so the two sit on the same line. IconPosition moves it from the front of the text to after it, which is where the two glyphs a link carries most often, the arrow of a link opening a new tab and the tray of a download, belong. The glyph is drawn as decoration and hidden from screen readers, so whatever it says has to be in the link text as well.

Link with a leading icon

Link with a trailing icon

Icon on an underlined link

Target

The Target parameter controls the browsing context the link opens in; the BitLinkTarget class provides the standard values, but any plain string (like a frame name) works too. A _blank target is hardened twice over: it automatically gets a noopener rel attribute so the opened page cannot reach back into the app (see the Rel section below), and it announces that it opens in a new tab (see the next section).

Blank target link(opens in a new tab)

Parent target link

Self target link

Top target link

New tab announcement

A new tab is a change of context nothing on the page predicts, and the back button no longer returns from it, so a _blank link carries the sentence saying so as visually hidden text after its content. Nothing changes on screen; a screen reader reads "opens in a new tab" with the link. NewTabHint replaces that sentence, for translating it or wording it another way, and NoNewTabHint takes it off where the page already says it, next to a visible label of your own or a trailing icon whose meaning the text already carries. When an AriaLabel is set, the sentence is appended to it instead, since an aria-label replaces the content rather than adding to it. An app that is not written in English says the sentence once for all of its links, by cascading a BitLinkParams with a NewTabHint of its own through BitParams.

Announced as opening in a new tab(opens in a new tab)

Announced with a translated sentence(در زبانه جدید باز می‌شود)

Opens in a new tab (said in the text already)

Download

When the link points to a file, the Download parameter tells the browser to save it instead of navigating to it. Pass an empty string to keep the server-provided file name, or a value to suggest your own. Browsers honor this only for same-origin, blob:, and data: URLs, so a cross-origin link will simply navigate as usual.

Download the bit logo

Download with a custom file name

Title

The Title parameter is the browser's own tooltip, shown after a hover long enough to count as one. Neither touch nor the keyboard reaches it, so nothing the reader has to have belongs only here: it is the place for what a full URL, or a longer wording of the link text, adds to the words already on screen.

Hover to see the full address

AriaDescription

AriaDescription is a longer sentence about the link, rendered as visually hidden text the link points at through aria-describedby. A description is read out after the name and is not part of it, which makes it the place for what the reader would want to know before following the link but not in the words on the page: the size of a file, the format it is in, what the page it leads to will ask for. Unlike a Title, which the browser only ever shows to a mouse, this reaches everyone a screen reader is reading to.

Download the brand guidelines PDF, 2.4 megabytes

OnClick

Without an Href, the link renders as a button styled like a link and OnClick is its whole action. With an Href, OnClick still fires alongside the navigation, which is handy for tracking or for extra work right before leaving. The StopPropagation parameter keeps the click from bubbling up to clickable containers around the link.



Link with both Href and OnClick(opens in a new tab)
OnClick count: 0

A clickable container (clicked 0 times):

PreventDefault

PreventDefault suppresses the navigation a click would otherwise perform, leaving OnClick as the whole of what the click does. The anchor keeps its Href, so the destination is still what the status bar shows, what a middle click opens in a new tab and what "copy link address" copies, which is what separates this from a link with no href at all. That is what a link needs to confirm before leaving, or to save a draft first and navigate from the handler afterwards.

Ask before leaving

Navigate to elements

An Href starting with the # character smooth-scrolls the element with that id into view and moves the keyboard focus to it, so the next Tab carries on from the destination rather than from the link, without pushing the fragment into the browser's address bar. The scroll drops to an instant jump for a reader who has asked for reduced motion, and a scroll-margin style on the target element keeps it clear of any fixed header once it arrives.

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

Rel

The Rel parameter describes the relationship between the current document and the linked one, using the BitLinkRels flags enum, so multiple values combine with the | operator. It covers the full set of HTML rel values, including the newer sponsored, ugc, opener, privacy-policy and terms-of-service. When the Target is _blank and no opener-related rel (NoOpener, NoReferrer or Opener) is provided, noopener is added automatically to keep the opened page from reaching back into the app.

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(opens in a new tab)

AllowDisabledFocus

A disabled link is normally removed from the tab order, which means keyboard and screen reader users can miss that it exists at all. Setting AllowDisabledFocus conveys the disabled state through aria-disabled instead, so the link stays focusable and discoverable while its navigation and click action remain suppressed. Tab through the two links below to feel the difference.

Disabled link (skipped by Tab)

Disabled link with AllowDisabledFocus (focusable)

AriaCurrent

In a set of links, exactly one of them leads to where the reader already is, and drawing it differently says so only to whoever is looking at it. The AriaCurrent parameter says the same thing in a way a screen reader announces, through the aria-current attribute: use Page in a navigation menu, Step in a wizard, Location in a breadcrumb, and True where the kind of set does not have a name. Only one link of a set is ever the current one.

Link (this page)

Button

Image

NoColor

The NoColor parameter stops the link from applying any foreground color, letting the content keep its own color, useful when the link wraps rich content that brings its own styling.

Link with default color!

this text color is coming from the link itself.

Link with NoColor!

Color

External Icons

Use icons from external libraries like FontAwesome and Bootstrap Icons with the Icon parameter and BitIconInfo. Whatever type scale the set came with, the glyph is normalized back to the size of the link text beside it, so it sits on the same line as the words and follows the link's own color.

FontAwesome:

bit platform on GitHub

Opens in a new tab(opens in a new tab)


Bootstrap:

bit platform on GitHub

Opens in a new tab(opens in a new tab)

Size

With nothing set, a link takes the font size of whatever it sits in, which is what keeps a link inside a paragraph the same size as the sentence around it. The Size parameter is for the link that stands on its own, where there is no surrounding text to take a size from.

Small link

Medium link

Large link

The icon follows the size

Style & Class

The link is one element - the anchor or the button it renders as - so the root-level Style and Class parameters are all it takes to restyle it, on top of the theme tokens it reads its colors from. An icon inside it follows the color and the size the link is given, since it is drawn in the link's own type.

Link with style

Link with class

RTL

Use the Dir parameter to render the link in right-to-left direction for RTL languages. An icon follows the direction too, so a leading glyph stays on the leading side of the text.

API

Every parameter, public member, sub-class and enum this component exposes.

BitLink 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.

BitLink 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.

BitComponentBase parameters

Name Type Default value Description
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.

BitComponentBase public members

Name Type Default value Description
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.

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.

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.

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.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.