Navigation
Social Links
Social links are clickable or buttons that direct users from a product or website to external social media platforms (E.g Facebook, X, Instagram, LinkedIn)
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features7 checks
- Each link has a descriptive aria-label identifying the platform (e.g. "Visit us on Facebook")
- Brand glyphs are decorative and hidden from assistive technology with aria-hidden="true"
- Links open in a new tab and announce "opens in a new tab" via the accessible label
- rel="noopener noreferrer" prevents reverse tabnabbing and protects the opener window
- Filled/outline/tonal variants meet the 24x24px (SM) minimum target; MD/LG exceed 40px
- Visible focus ring (2px brand purple, 2px offset) on keyboard focus (WCAG 2.4.7)
- Color is never the only differentiator, each icon has a unique recognisable shape
When to use this component
✓Do's
- •Linking to a department's official social media profiles
- •Building a site footer or "Connect with us" contact section
- •You need consistent, recognisable platform icons across pages
- •The links sit on a dark surface and need the inverse style
✗Don'ts
- •If the destination is an internal page, use a Link instead.
- •If you need a labelled action button, use IconButton or Button.
- •The handle is unofficial or unverified for the service
- •If you would link to more than 6–7 platforms, prioritise the official ones.
Do's and Don'ts
✗ Don'ts