HDS Social Buttons

[abbybowman]

Feature name

Component: Social icon buttons with BW (grayscale) and Color (platform-specific) variants

Feature area

Assets (fonts, icons, images)

Describe the idea

Circular social buttons are included for sharing and linking to social media accounts. Black and white versions of each are included for a lower-emphasis option.

Use case / user story

As a dev building with HDS Core, I don't want to have to hunt down the colors and glyphs needed for common social media platforms in order to make social buttons that match the HDS design

Primary audience

All of the above

Is this already in the HDS Figma library?

✅ Yes — fully specced in HDS Figma

Figma reference

No response

Implementation maturity

✅ Production — already running on a live NASA site or project

Prior art details

On NASA.gov, can see full-color social share buttons to the left or at the bottom of articles, as well as grayscale social buttons in the site footer linking to NASA's flagship social media accounts. On plus.nasa.gov, can see social buttons (color) on the landing page for a video in the the modal that pops up after clicking the Share button, as well as grayscale social buttons in footer.

Relationship to USWDS

Configures / themes an existing USWDS component

Potential breaking change?

No — purely additive

Alternatives considered

No response

Additional context

Notes for future build:

• Figma shows every social platform (Facebook, Twitter, Instagram, YouTube, Pinterest, LinkedIn, "More") in paired BW/Color versions
• Current .hds-btn-icon--social only handles one mode
• Options: (a) .hds-btn-icon--social-bw modifier class, (b) CSS custom property toggle, (c) data- attribute
• The BW versions appear to be dark fill + white icon (same as current --social), while Color versions use each platform's brand color as fill
• Brand colors will need to be defined somewhere — either as one-off variables or a small map
• Consider: should the toggle be per-button or per-container? (A social sharing bar might flip all at once)
• Accessibility: Ensure sufficient contrast for brand color fills against white icons

Would you contribute to this?

Yes — I could submit a PR