LinkBase

Who uses itLink to "Who uses it"

Link and Card (when it navigates), and any composite that navigates.

When to use it directlyLink to "When to use it directly"

Only when building a new composite that navigates and needs a native anchor.

Use a component instead when you want a link in content: Link. For an action that does not navigate, use Button.

UsageLink to "Usage"

import { LinkBase } from "@arshad-shah/cynosure";

<LinkBase className="my-link" href="/docs">Docs</LinkBase>
<LinkBase href="https://example.com" target="_blank">Example</LinkBase>

<LinkBase href="javascript:alert(1)">Dropped</LinkBase> // renders <a> with no href

PropsLink to "Props"

It accepts every native anchor attribute.

GuaranteesLink to "Guarantees"

• New tabs: with target="_blank", rel gets noopener noreferrer added after any rel you pass.
• Safe schemes only: href is checked by safeHref (internal to LinkBase). Relative, hash and query URLs, and http, https, mailto and tel are linked. Anything else, including javascript:, is dropped and the anchor gets no href.
• Parsed like a browser: safeHref strips tab and newline characters anywhere and leading control characters before checking, so obfuscated javascript: URLs cannot slip through. An unparseable absolute URL is dropped.
• The ref reaches the native <a>.

RelatedLink to "Related"

Link · Button