Preview

Usage

<cs-link href="/dashboard" variant="primary">Go to dashboard</cs-link>
<cs-link href="https://docs.aws.amazon.com" external>Documentation</cs-link>

Properties

aria-labelstring default: null

Adds an aria-label to the HTML element.

colorLinkProps.Color

Determines the text color of the link and its icon.

• normal: Use in most cases where a link is required.
• inverted: Use to style links inside Flashbars.

This property is overridden if the variant is info.

externalboolean default: false

Marks the link as external by adding an icon after the text. If href is provided, opens the link in a new tab when clicked.

external-icon-aria-labelstring

Adds an aria-label to the external icon.

font-sizeLinkProps.FontSize default: 'body-m'

Determines the font size and line height. This property is overridden if the variant is info.

hrefstring default: this.shadowRoot?.querySelector<HTMLElement>('.link')

The URL that the link points to. If an href is not provided, the component will render using a "button" role and target will not be used.

relstring

Adds a rel attribute to the link. If the rel property is provided, it overrides the default behaviour. By default, the component sets the rel attribute to "noopener noreferrer" when external is true or target is "_blank".

targetstring

Specifies where to open the linked URL. Set this to _blank to open the URL in a new tab. If you set this property to _blank, the component automatically adds rel="noopener noreferrer" to avoid performance and security issues.

For other options see the documentation for tag's target attribute.

variantLinkProps.Variant default: 'secondary'

Determines the visual style of the link as follows:

• primary - Displays the link text with an underline for sufficient contrast with surrounding text. Use this for links adjacent to other text, such as inside a paragraph, a "Learn more" link, an item ID in a table, a link in a key-value pair, or a link in an alert.
• secondary - Uses regular font weight without additional interactivity indicators (except for an underline on hover). Use this where context implies interactivity and users can identify links easily, such as in a list of links inside a container.
• info - Use for "info" links that link to content in a help panel.

The default is secondary, except inside the following components where it defaults to primary:

• Table
• Cards
• Alert
• Popover
• Help Panel (main content only)

Slots

default

The text to render inside the link.

Events

clickCustomEvent<LinkProps.ClickDetail>

Called when the user clicks on the link. Do not use this handler for navigation, use the onFollow event instead.

followCustomEvent<LinkProps.FollowDetail>

Called when a link is clicked without any modifier keys. If the link has no href provided, it will be called on all clicks.

If you want to implement client-side routing yourself, use this event and prevent default browser navigation (by calling preventDefault).