KbqLink is a component that connects web pages or acts as a lighter alternative to a button.

Size

The size attribute sets the size of the link, its typography and the gaps to its icons.

Underline

The underline attribute sets when the link text is underlined. By default a link is always underlined, and a pseudo link only on hover.

Disabled

The disabled attribute makes the link inactive. It keeps its address, but cannot be followed.

Visited

The useVisited attribute colors visited links. It is useful on collection pages, such as article roundups and reading lists, where the color marks reading progress.

Pseudo link

A pseudo link looks like a link, but acts as a button, performing an action without leaving the page. Use it for an action inside text.

Content

Icon

Mark an icon before the text with kbqLinkPrefix and an icon after the text with kbqLinkSuffix. The icon is within the click area, but is not underlined.

Multi-line link

A long link wraps like plain text, and every line is underlined.

Link in text

Put the preposition that belongs to the link inside it. Put the period that ends the sentence in an element with kbqLinkSuffix, so that it takes the link color, but is not underlined.

Destination

New tab and external pages

The external attribute adds the icon to a link to an external page or to a link that opens in a new tab. It does not open the page in a separate tab itself, so add the target="_blank" attribute for that.

External application

When a link opens another application, name the application in the link text. Instead of the icon, the application logo can be shown with kbqLinkSuffix.

Scan report in AI DesktopScan report in AI Desktop

Show code

StackBlitz

Printing

The print attribute adds the link address after its text when the page is printed, without the protocol and www.. To print something else, pass the text to the attribute.

Default settings

kbqLinkOptionsProvider sets the link defaults for the whole application or for one component. A value set on the link itself takes precedence.

bootstrapApplication(AppComponent, {
    providers: [kbqLinkOptionsProvider({ size: 'compact', useVisited: true })]
});

Keyboard

Recommendations

• Open links in the same tab by default.
• For an action inside text, use a pseudo link. For interactivity outside text, use a ghost button, whose click area is larger.
• For the primary action in a modal dialog, use a button.
• A link should not lead to the page it is on. You click, the page loads, and you are where you started. The exception is a page with refreshable content, where the link duplicates the refresh.
• A link should work like a link, not only look like one. Use the <a> tag, so that the address can be copied and the page opened in a new tab from the context menu.
• The link text answers "what? where?". A pseudo link is worded like a button.