Make SocialIcons support opening links in a new tab via a prop

[anjalxbt]

What version of starlight are you using?

0.37.4

What is your idea?

I’d like to propose adding an optional, non-breaking prop to SocialIcons that allows consumers to opt into opening social links in a new tab.

Why is this feature necessary?

The SocialIcons component currently renders social links using a fixed <a> behavior, which always opens links in the same tab.

Many Starlight users link to external profiles (GitHub, Mastodon, Twitter, etc.) via social, and may prefer those links to open in a new tab. At the same time, enforcing this behavior by default would be a breaking UX change.

Proposed API
<SocialIcons openInNewTab />

• openInNewTab?: boolean
• Default: false (current behavior preserved)

Proposed Implementation (summary)

• When openInNewTab is true:
• • add target="_blank"
• • append noopener noreferrer to the existing rel attribute
• Preserve rel="me" regardless of the option
• No changes to default behavior

Example logic inside the component:

<a
  href={href}
  target={openInNewTab ? "_blank" : undefined}
  rel={[
    "me",
    openInNewTab && "noopener noreferrer",
  ].filter(Boolean).join(" ")}
>

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.

[HiDeoo]

Thanks for the feedback 🙌

As commented in this other discussion, such behavior and restriction is intentional as UX researches have shown that opening links in new tabs/windows without user consent is a very rarely desired behavior and often leads to confusion. You can find more details for example in this article from the Nielsen Norman Group.

As this recommendation follows our general philosophy of prioritizing user experience, we don't have any plans to either change this behavior or to add an option to customize it.

For users who really want to open such links in new tabs/windows, we recommend using a component override.

As such, I'm going to go ahead and mark this discussion as a duplicate of the other one. Thank you for your understanding.