⚠️ Some props/prop values deprecated in SWAN v3.3
Refer to the information on props/prop values provided further down this page. Find more information and migration documentation in the Deprecation roadmap.
Use width="full-width" to make the link fill its container instead of being inline.
Use as a call-to-action in Standard Tile or Banner.
Use skin="cta" to position the arrow to the right of the text.
Use skin="cta-left" to position the arrow to the left.
Inside a block of Typography that sets the text
color to white, the CTA link automatically changes its icon to white
unstyled skin won't show up with normal link styling, although it still gets the "pointer" cursor on hover.Use covering to increase the clickable target of a Link to cover the nearest ancestor element that has positioning context. This is usually a Standard Tile or a Card with skin="link".
Only wrap the Link around the content that should be included in the accessible name, which is usually the title or call-to-action.
Use skin="unstyled" to remove the normal link styling.
⚠️ withIconSeparated is deprecated in SWAN v3.3
Replace it with withIcon which behaves the same.
Use render for Links with the behavior of a Button. Refer to render guidelines.
Links that perform an action on the current page should render a <button> instead of an <a> for accessibility requirements.
Use render for Buttons with the behavior of a Link. Refer to render prop guidelines.
Buttons that take users to a new page should render an <a> instead of a <button> for accessibility requirements.
Some routing frameworks, like Gatsby, Next, or TanStack Router, suggest using their own Link component for routing. While that can be done at the component level using the as or render props, it can also be configured within SwanProvider. For more information, see the SwanProvider setup docs.
For taking the user to another site.
For use as a call-to-action in Standard Tile, Secondary Tile, or Standard Hero.
Typically placed in the Navigation menu, a lateral menu, or the Footer of the page.
For use in components that already provide their own affordance and hover styling, such as Standard Tile. Unstyled links provide no affordance.
Avoid changing the styling and type size for links.
rel="nofollow" attribute to internal links that are pointing to a page that should not be crawled by search engine bots.Avoid using the unstyled skin unless there is something else providing visual affordance (not just on hover, since not all users are mouse users).
<a /> as the root element. You can utilize the native attributes supported by <a /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| width | "standard" | "full-width" | null | false | Set the width of the Link.
One of: "standard", "full-width". | standard |
| to | string | null | false | Sets the destination URL in case you are setting globalLinkComponent(SwanProvider) to 3rd party library's Link (Gatsby, Next.js, React router, etc.). | null |
| skin | "standard" | "unstyled" | "cta" | "cta-left" | null | false | The visual style of the Link.
One of: "standard", "cta", "cta-left", "unstyled". | standard |
| covering | boolean | null | false | Whether the Link's clickable target should cover the entirety of it's nearest ancestor element. | null |
| withIcon | boolean | null | false | Whether this is a "link with icon". | null |
| withIconSeparated | boolean | null | false | ⚠️ Deprecated - `withIconSeparated` behaves the same as `withIcon`, use `withIcon` instead. @description Whether this "link with icon" has the icon and text visually separated. | null |
