Skip to main content
Digitaltableteur

Design system components

SocialIconLink

Icon-only social or profile link with enforced accessible name and external-safety (target=_blank + rel) by default.

Status: alpha. Group: navigation. Markdown version: /design-system/components/social-icon-link.md

When to use

Icon-only social or profile link with enforced accessible name and external-safety (target=_blank + rel) by default.

When not to use

  • Do not put text children inside; this is icon-only; use Link for labeled links.
  • Do not disable external for social profiles; same-tab is for internal routes only.

Look-alikes

  • Link: Do not put text children inside; this is icon-only; use Link for labeled links.

Props

SocialIconLink props
PropTypeDefaultDescriptionRequired
hrefstringnoneDestination URL.Yes
labelstringnoneAccessible name; required, the control is icon-only.Yes
childrenReact.ReactNodenoneThe icon. Rendered inside an aria-hidden wrapper so only label names the link.Yes
variant"plain" | "chip"plainVisual treatment: bare glyph (footers) or bordered circular chip (share rows).No
size"sm" | "md" | "lg"mdHit-target size token.No
externalbooleantrueOpen in a new tab with rel="noopener noreferrer".No
classNamestringnoneAdditional CSS class names.No

Variants

  • Available variants: plain, chip (default plain).
  • Available sizes: sm, md, lg (default md).

Invalid combinations

The contract records no invalid combinations.

Keyboard

SocialIconLink keyboard behaviour
KeyBehaviour
TabMoves focus to the control and on to the next focusable element. (standard)
EnterActivates the focused control. (standard)

Rows marked (standard) name a key the contract lists without a description; the behaviour shown is the usual one for that key.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

SocialIconLink rules
LevelRuleHow it is checked
MUSTARIA: Label prop is the accessible name (aria-label); the icon child is aria-hidden.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: External links carry rel=noopener noreferrer.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTRequired stories produce no axe violations at the configured severity.Automated by npm run test:stories:matrix:ci. WCAG 2.5.8.
MUSTThe accessibility tree (role, name, state) matches the committed snapshot for every required story.Automated by npm run test:stories:matrix:ci. WCAG 1.3.1, 4.1.2.
MUSTThe component remains legible and operable under a real browser forced-colors: active pass.Automated by npm run test:stories:hc.
MUSTEvery documented keyboard interaction works as specified.Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.

Install and import

  • In-repo only. SocialIconLink is not exported from @digitaltableteur/react, so there is no public import path.
  • Alpha components are internal and never exported.

Links