Platform Badge

Platform badges are branded badges for linking to app stores and podcast platforms. Unlike icons, these are full-color, non-square assets rendered as CSS background images.

Badges automatically adapt to the current scheme — dark badges in neutral, light badges in contrast.

Develop

Platforms

App Store

<a
  href="#"
  class="tng-platform-badge is-app-store"
  aria-label="Download on the App Store"
></a>

Default

Contrast

Google Play

<a
  href="#"
  class="tng-platform-badge is-google-play"
  aria-label="Get it on Google Play"
></a>

Default

Contrast

Apple Podcasts

<a
  href="#"
  class="tng-platform-badge is-apple-podcasts"
  aria-label="Listen on Apple Podcasts"
></a>

Default

Contrast

Spotify

<a
  href="#"
  class="tng-platform-badge is-spotify"
  aria-label="Listen on Spotify"
></a>

Default

Contrast

Sizes

Three sizes are available: is-sm (32px), default (40px), and is-lg (56px).

<a
  href="#"
  class="tng-platform-badge is-app-store is-sm"
  aria-label="Download on the App Store"
></a>
<a
  href="#"
  class="tng-platform-badge is-app-store"
  aria-label="Download on the App Store"
></a>
<a
  href="#"
  class="tng-platform-badge is-app-store is-lg"
  aria-label="Download on the App Store"
></a>

Default

Contrast

Accessibility

For developers

Always use links

Platform badges should be rendered as <a> elements linking to the relevant platform page. The badge image is decorative — the link’s purpose is conveyed via aria-label.

<a
  href="https://apps.apple.com/app/your-app/id123456789"
  class="tng-platform-badge is-app-store"
  aria-label="Download on the App Store"
></a>

Scheme support

The badge automatically adapts to the current scheme context. When placed inside an is-contrast container, the light variant renders automatically — no extra classes needed.