Skip to content

Social Media Button

Icon-only buttons for social media actions and sharing.

Ready to use

Design Develop Accessibility

The Social Media Button component provides direct links to official brand social media channels and app store platforms. It is primarily used in the footer, where it lets users navigate to platforms such as YouTube, Facebook, Instagram, LinkedIn, X (Twitter), TikTok, the App Store, and Google Play. The buttons are preconfigured and managed via the AEM “Header and Footer” template — icons are not editable by AEM authors but can be reordered through the configuration dialog.

Anatomy

Section titled “Anatomy”
  1. Container
  2. Brand icon

When to use it

Section titled “When to use it”

Use Social Media Buttons when:

  • You need to display social media or app store links consistently across pages.
  • You’re reinforcing brand presence through verified, official channels.
  • Global consistency matters — the component ships with preloaded icons for every official network.

Avoid Social Media Buttons when:

  • The link points to a temporary campaign or unverified third-party content.
  • You’re building an in-page share or “follow us” module outside the footer context — use buttons or links instead.

Properties

Section titled “Properties”

Size

Two sizes: Small (32×32) for compact footers and Large (40×40) for more prominent placements. Both keep the icon centred and respect the 1 px border at rest.

State

Rested, Hover, Active, Disabled, and Focus. Focus uses a 2 px ring around the square container so keyboard users see a clear outline at any size.

Brand icon

The icon set is fixed — YouTube, Facebook, Instagram, LinkedIn, X, TikTok, App Store, Google Play. All icons are SVG-based and optimised for crisp rendering on both light and dark backgrounds; they must not be recoloured or modified.

Mode

Toyota and Lexus brand modes resolve automatically based on the active data-brand. The structural layout and behaviour stay identical between modes.

Platform considerations

Section titled “Platform considerations”

Desktop

Buttons sit in a single row inside the footer. Keep spacing consistent with surrounding footer elements so the visual rhythm stays predictable.

Tablet

Same row layout, with the same spacing tokens. The small size remains comfortable to tap because the 1 px border doesn’t shrink the actual hit area.

Mobile

Prefer the larger 40×40 size on mobile footers to keep buttons within the 44×44 recommended touch area. Keep generous padding around the row so users don’t tap an adjacent icon by mistake.

Best practices

Section titled “Best practices”

Treat these buttons as fixed brand chrome, not as freeform marketing links.

Do

Use only the official brand icons that ship with the component, keep spacing consistent with surrounding footer elements, and write clear aria-label values such as “Follow us on YouTube” so screen readers announce the destination.

Don't

Don’t recolour or modify the brand icons, don’t repurpose the component outside the footer, and don’t drop the focus ring — keyboard users rely on it for the otherwise borderless rested state.

Content guidelines

Section titled “Content guidelines”

The button is icon-only, so the accessible name does all the work. Use a short, descriptive aria-label that names the destination — “Follow us on YouTube”, “Download from the App Store” — and keep the wording consistent across markets so the announcement stays predictable.