SocialIconButton

Implemented

Circular icon link for social profiles. Bundles the icon with its required accessible label so an icon-only control is never shipped without its text alternative. Opens in a new tab (target=_blank, rel=noopener noreferrer).

Categoryatoms

Sourcecomponents/atoms/SocialIconButton/SocialIconButton.tsx

AI HintCircular social-profile link opening in a new tab — label is required (icon-only control) and the icon child is aria-hidden. 44x44 with the DS-standard teal focus ring.

SocialIconButton component.

SocialIconButton

design-system

SocialIconButton component preview and API reference.

Props

Preview

SocialIconButton

Prop

Type

Required

Default

Description

href

string

Required

—

Social profile URL

label

string

Required

—

Accessible name, e.g. "ePassLive on Instagram". Required — icon-only control.

children

React.ReactNode

Required

—

The icon node (decorative; the accessible name comes from `label`)

className

string

Optional

''

Extra utility classes appended to the anchor

Quick use:<SocialIconButton />

Accessibility

ARIA rolelink

Usage

Import

tsxSnippet

import { SocialIconButton } from "@epasslive/design-system"

Example 1

tsxSnippet

<Button variant="primary">Submit</Button>

Example 2

tsxSnippet

<Button variant="secondary" size="sm">Cancel</Button>

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms