Light Dark System

Social Link

<cw-social-link> | CwSocialLink
Since 1.3 experimental

A link to a social or fediverse profile, rendered as a single icon. Purpose-built for this domain rather than a generic icon-link: set platform for one of the common networks and both the icon and accessible label are filled in for you.

Set platform for one of the common networks and both the icon and accessible label are filled in for you. <cw-social-link> works anywhere — it’s not tied to <cw-footer>, though that’s the most common place to use several of them together. 

<cw-social-link href="https://github.com" platform="github"></cw-social-link>
<cw-social-link href="https://linkedin.com" platform="linkedin"></cw-social-link>
<cw-social-link href="https://x.com" platform="twitter"></cw-social-link>
<cw-social-link href="https://mastodon.social" platform="mastodon"></cw-social-link>

import { CwSocialLink } from '@cordwainer/cw-elements/dist/react';

const App = () => (
  <>
    <CwSocialLink href="https://github.com" platform="github" />
    <CwSocialLink href="https://linkedin.com" platform="linkedin" />
    <CwSocialLink href="https://x.com" platform="twitter" />
    <CwSocialLink href="https://mastodon.social" platform="mastodon" />
  </>
);

Examples

Supported Platforms

platform covers the common social and fediverse networks the bundled system icon library already ships icons for: bluesky, discord, facebook, github, instagram, linkedin, mastodon, threads, tiktok, twitter (maps to the current X mark), and youtube. 

<cw-social-link href="#" platform="bluesky"></cw-social-link>
<cw-social-link href="#" platform="discord"></cw-social-link>
<cw-social-link href="#" platform="facebook"></cw-social-link>
<cw-social-link href="#" platform="github"></cw-social-link>
<cw-social-link href="#" platform="instagram"></cw-social-link>
<cw-social-link href="#" platform="linkedin"></cw-social-link>
<cw-social-link href="#" platform="mastodon"></cw-social-link>
<cw-social-link href="#" platform="threads"></cw-social-link>
<cw-social-link href="#" platform="tiktok"></cw-social-link>
<cw-social-link href="#" platform="twitter"></cw-social-link>
<cw-social-link href="#" platform="youtube"></cw-social-link>

import { CwSocialLink } from '@cordwainer/cw-elements/dist/react';

const App = () => (
  <>
    <CwSocialLink href="#" platform="bluesky" />
    <CwSocialLink href="#" platform="discord" />
    <CwSocialLink href="#" platform="facebook" />
    <CwSocialLink href="#" platform="github" />
    <CwSocialLink href="#" platform="instagram" />
    <CwSocialLink href="#" platform="linkedin" />
    <CwSocialLink href="#" platform="mastodon" />
    <CwSocialLink href="#" platform="threads" />
    <CwSocialLink href="#" platform="tiktok" />
    <CwSocialLink href="#" platform="twitter" />
    <CwSocialLink href="#" platform="youtube" />
  </>
);

An Unlisted Platform

For a network that isn’t one of the built-in platforms, set name/library (any registered icon) and label yourself — the same manual props also let you override any part of what platform would have derived. 

<cw-social-link href="https://example.com/feed.xml" name="rss" library="system" label="RSS Feed"></cw-social-link>

import { CwSocialLink } from '@cordwainer/cw-elements/dist/react';

const App = () => <CwSocialLink href="https://example.com/feed.xml" name="rss" library="system" label="RSS Feed" />;

Verifying a Fediverse Profile

Mastodon and the wider fediverse use the IndieWeb rel="me" convention to verify that a profile link points back to you. rel is a plain overridable property, so set it directly — no dedicated prop needed: 

<cw-social-link
  href="https://mastodon.social/@cordwainer"
  platform="mastodon"
  rel="me noreferrer noopener"
></cw-social-link>

import { CwSocialLink } from '@cordwainer/cw-elements/dist/react';

const App = () => (
  <CwSocialLink href="https://mastodon.social/@cordwainer" platform="mastodon" rel="me noreferrer noopener" />
);

Color

<cw-social-link> inherits its color from wherever it’s placed, rather than imposing its own default — useful for matching a footer’s or a page’s own link color. 

<div style="color: var(--cw-color-primary-600);">
  <cw-social-link href="https://github.com" platform="github"></cw-social-link>
</div>

import { CwSocialLink } from '@cordwainer/cw-elements/dist/react';

const App = () => (
  <div style={{ color: 'var(--cw-color-primary-600)' }}>
    <CwSocialLink href="https://github.com" platform="github" />
  </div>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/social-link/social-link.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/social-link/social-link.js';

To import this component using a bundler:

import '@cordwainer/cw-elements/dist/components/social-link/social-link.js';

To import this component as a React component:

import CwSocialLink from '@cordwainer/cw-elements/dist/react/social-link';

Properties

Name Description Reflects Type Default
href The URL of the profile to link to. string ''
target Tells the browser where to open the link. Defaults to a new tab, since a social link always points off-site. '_blank' | '_parent' | '_self' | '_top' '_blank'
rel The rel attribute for the link. Defaults to noreferrer noopener. To mark this link as a verified profile reference — the IndieWeb rel="me" convention Mastodon and the wider fediverse use for identity verification — include me yourself, e.g. rel="me noreferrer noopener". string 'noreferrer noopener'
platform One of the common social/fediverse platforms. When set, both the icon and the accessible label default to that platform’s — set name/library and/or label explicitly to override either, or to support a platform not in this list. Platform | undefined -
name The name of the icon to draw. Defaults to platform’s icon when set. string | undefined -
library The name of a registered custom icon library. Defaults to system when platform is set. string | undefined -
label A description that gets read by assistive devices. Defaults to platform’s name when set. string | undefined -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The internal <cw-icon-button>’s exported base part.
base__icon-button An alias of base, kept for consistency with other components that forward an icon-button’s exported base part.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <cw-icon>
  • <cw-icon-button>