Social Button

Icon-only buttons for social media actions and sharing.

Sizes

The default size is sm.

<button
  class="tng-social-button is-sm"
  aria-label="Share on Facebook"
>
  <i class="tng-icon icon-facebook" aria-hidden="true"></i>
</button>
<button class="tng-social-button is-lg" aria-label="Share on YouTube">
  <i class="tng-icon icon-youtube" aria-hidden="true"></i>
</button>

States

<button
  class="tng-social-button"
  disabled
  aria-label="Share on YouTube"
>
  <i class="tng-icon icon-youtube" aria-hidden="true"></i>
</button>

Accessibility

Social buttons must include an accessible label. Prefer aria-label over .sr-only (learn why).

<button class="tng-social-button" aria-label="Follow us on YouTube">
  <i class="tng-icon icon-youtube" aria-hidden="true"></i>
</button>