Social Share Button
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 allows users to navigate to social platforms such as YouTube, Facebook, Instagram, LinkedIn, Twitter (X), or TikTok, as well as the App Store and Google Play.
These buttons are preconfigured and managed via the AEM “Header and Footer” template. Icons are not editable by the AEM user but can be reordered through the configuration dialog.
When to use it (and when not to)
Section titled “When to use it (and when not to)”Use this component to:
- Display social media or app store links in a consistent, accessible way across all pages.
- Reinforce brand presence through verified channels.
- Support global consistency with preloaded icons for all official networks.
Avoid using it to:
- Link to temporary campaigns or unverified third-party content.
- Replace in-page share or “follow us” modules outside the footer context.
Quick summary of accessibility & consistency
Section titled “Quick summary of accessibility & consistency”- Each button must remain fully perceivable, operable, and understandable across devices and input types (mouse, touch, keyboard).
- Minimum touch target size: 44 × 44 px.
- Ensure WCAG 2.1 AA contrast (minimum 3:1 for icon-to-background).
- Focus ring must be visible at all times and compliant with accessibility standards.
- Use semantic
<a>elements with cleararia-labelvalues (e.g.aria-label="Follow us on YouTube"). - All icons are SVG-based and optimised for crisp rendering on both light and dark backgrounds.
- The component supports keyboard navigation (Tab + Shift + Tab).
- Maintain consistent spacing and alignment with footer elements for predictable interaction patterns.
- When used in combination with store badges, follow the same tokenised spacing and alignment rules for visual harmony.
Anatomy
Section titled “Anatomy”Icon
Youtube
Depends on: Youtube
Size: 20
Container
Social Media Follow
Depends on: Social Media Follow
Change Icon: <Instance name>
State: Rested
Properties
Section titled “Properties”Size : Small by State
Section titled “Size : Small by State”Rested
Social Media Follow
Background color:
buttons-social-button-neutral-active-fill-color#333333buttons-social-button-neutral-active-fill-color#282830 Border color:
buttons-social-button-neutral-active-border-color#282830buttons-social-button-neutral-active-border-color#282830 Height: 32
Width: 32
Border weight: 1
Border radius: 0
Hover
Social Media Follow
Background color:
buttons-social-button-neutral-hover-fill-color#d4d2d1buttons-social-button-neutral-hover-fill-color#e4e4e4 Border color:
buttons-social-button-neutral-hover-border-color#e5e3e1buttons-social-button-neutral-hover-border-color#6c7073 Height: 32
Width: 32
Active
Social Media Follow
Background color:
buttons-social-button-neutral-selected-fill-color#000000buttons-social-button-neutral-selected-fill-color#15151b Border color:
buttons-social-button-neutral-selected-border-color#000000buttons-social-button-neutral-selected-border-color#15151b Height: 32
Width: 32
Disabled
Social Media Follow
Background color:
buttons-social-button-neutral-disabled-fill-color#999999buttons-social-button-neutral-disabled-fill-color#282830 Border color:
buttons-social-button-neutral-disabled-border-color#999999buttons-social-button-neutral-disabled-border-color#282830 Height: 32
Width: 32
Focus
Social Media Follow
Border color:
color-border-focus-neutral-default#0072f0color-border-focus-neutral-default#0072f0 Border weight: 2
Border radius: 2
Social Media Follow
Size: Small
Size : Large by State
Section titled “Size : Large by State”Rested
Social Media Follow
Background color:
buttons-social-button-neutral-active-fill-color#333333buttons-social-button-neutral-active-fill-color#282830 Border color:
buttons-social-button-neutral-active-border-color#282830buttons-social-button-neutral-active-border-color#282830 Height: 40
Width: 40
Border weight: 1
Border radius: 0
Hover
Social Media Follow
Background color:
buttons-social-button-neutral-hover-fill-color#d4d2d1buttons-social-button-neutral-hover-fill-color#e4e4e4 Border color:
buttons-social-button-neutral-hover-border-color#e5e3e1buttons-social-button-neutral-hover-border-color#6c7073 Height: 40
Width: 40
Active
Social Media Follow
Background color:
buttons-social-button-neutral-selected-fill-color#000000buttons-social-button-neutral-selected-fill-color#15151b Border color:
buttons-social-button-neutral-selected-border-color#000000buttons-social-button-neutral-selected-border-color#15151b Height: 40
Width: 40
Disabled
Social Media Follow
Background color:
buttons-social-button-neutral-disabled-fill-color#999999buttons-social-button-neutral-disabled-fill-color#282830 Border color:
buttons-social-button-neutral-disabled-border-color#999999buttons-social-button-neutral-disabled-border-color#282830 Height: 40
Width: 40
Focus
Social Media Follow
Border color:
color-border-focus-neutral-default#0072f0color-border-focus-neutral-default#0072f0 Border weight: 2
Border radius: 2
Social Media Follow
Size: Large
Layout and spacing
Section titled “Layout and spacing”Size: Small, State: Rested
Section titled “Size: Small, State: Rested”Social Media Follow
Direction: Horizontal
Alignment: Middle center
Vertical resizing: Fixed
Horizontal resizing: Fixed
Item spacing: 10
Padding: 8
Size: Small, State: Focus
Section titled “Size: Small, State: Focus”Social Media Follow
Direction: Horizontal
Alignment: Middle center
Vertical resizing: Hug
Horizontal resizing: Hug
Item spacing: 10
Padding: 4
The Social Media Button supports two brand modes:
- Toyota
- Lexus
Brand-specific token values are resolved automatically based on the active mode.
Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
buttons-social-button-neutral-active-fill-color | Background color | Social Media Follow (Rested) |
buttons-social-button-neutral-active-fill-color | Background color | Social Media Follow (Rested) |
buttons-social-button-neutral-active-border-color | Border color | Social Media Follow (Rested) |
buttons-social-button-neutral-active-border-color | Border color | Social Media Follow (Rested) |
buttons-social-button-neutral-hover-fill-color | Background color | Social Media Follow (Hover) |
buttons-social-button-neutral-hover-fill-color | Background color | Social Media Follow (Hover) |
buttons-social-button-neutral-hover-border-color | Border color | Social Media Follow (Hover) |
buttons-social-button-neutral-hover-border-color | Border color | Social Media Follow (Hover) |
buttons-social-button-neutral-selected-fill-color | Background color | Social Media Follow (Active) |
buttons-social-button-neutral-selected-fill-color | Background color | Social Media Follow (Active) |
buttons-social-button-neutral-selected-border-color | Border color | Social Media Follow (Active) |
buttons-social-button-neutral-selected-border-color | Border color | Social Media Follow (Active) |
buttons-social-button-neutral-disabled-fill-color | Background color | Social Media Follow (Disabled) |
buttons-social-button-neutral-disabled-fill-color | Background color | Social Media Follow (Disabled) |
buttons-social-button-neutral-disabled-border-color | Border color | Social Media Follow (Disabled) |
buttons-social-button-neutral-disabled-border-color | Border color | Social Media Follow (Disabled) |
color-border-focus-neutral-default | Border color | Social Media Follow (Focus) |
color-border-focus-neutral-default | Border color | Social Media Follow (Focus) |
Accessibility
Section titled “Accessibility”For Design
Section titled “For Design”Each button must remain fully perceivable, operable, and understandable across devices and input types (mouse, touch, keyboard). Minimum touch target size: 44 × 44 px. Ensure WCAG 2.1 AA contrast (minimum 3:1 for icon-to-background). Focus ring must be visible at all times and compliant with accessibility standards.
For Dev
Section titled “For Dev”Each button must have an accessible name (e.g. aria-label="Follow us on YouTube") and visible focus state. Must be implemented as <a> links for external navigation.
Guidance on how to use a component.
- Use only official brand icons.
- Keep spacing consistent with other footer elements.
Guidance on what to avoid when using a component.
- Don’t recolour or modify brand icons.