Store Badge

A cross-platform React component for displaying official app store download badges with consistent styling for Google Play, App Store, and App Gallery.

Installation

npm install @xsolla/xui-store-badge
# or
yarn add @xsolla/xui-store-badge

Demo

All Store Types

import * as React from 'react';
import { StoreBadge } from '@xsolla/xui-store-badge';

export default function AllStores() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <StoreBadge type="google-play" />
      <StoreBadge type="app-store" />
      <StoreBadge type="app-gallery" />
    </div>
  );
}

Light Palette

import * as React from 'react';
import { StoreBadge } from '@xsolla/xui-store-badge';

export default function LightBadges() {
  return (
    <div style={{ display: 'flex', gap: 16, background: '#f5f5f5', padding: 24 }}>
      <StoreBadge type="google-play" palette="light" />
      <StoreBadge type="app-store" palette="light" />
    </div>
  );
}

Clickable Badges

import * as React from 'react';
import { StoreBadge } from '@xsolla/xui-store-badge';

export default function ClickableBadges() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <StoreBadge
        type="google-play"
        onPress={() => window.open('https://play.google.com/store/apps/details?id=com.example')}
      />
      <StoreBadge
        type="app-store"
        onPress={() => window.open('https://apps.apple.com/app/example/id123456789')}
      />
    </div>
  );
}

Anatomy

import { StoreBadge } from '@xsolla/xui-store-badge';

<StoreBadge
  type="google-play"       // google-play, app-store, app-gallery
  palette="dark"           // dark or light
  onPress={handlePress}    // Click handler
  data-testid="badge"      // Test ID
/>

Examples

App Download Section

import * as React from 'react';
import { StoreBadge } from '@xsolla/xui-store-badge';

export default function AppDownload() {
  return (
    <section style={{ textAlign: 'center', padding: 48 }}>
      <h2>Download Our App</h2>
      <p style={{ marginBottom: 24, color: '#666' }}>
        Available on your favorite platforms
      </p>
      <div style={{ display: 'flex', gap: 16, justifyContent: 'center' }}>
        <StoreBadge
          type="google-play"
          onPress={() => window.open('https://play.google.com')}
        />
        <StoreBadge
          type="app-store"
          onPress={() => window.open('https://apps.apple.com')}
        />
      </div>
    </section>
  );
}

Footer Badges

import * as React from 'react';
import { StoreBadge } from '@xsolla/xui-store-badge';

export default function FooterBadges() {
  return (
    <footer style={{ background: '#1a1a1a', padding: '48px 24px' }}>
      <div style={{ maxWidth: 800, margin: '0 auto' }}>
        <h3 style={{ color: '#fff', marginBottom: 16 }}>Get the Mobile App</h3>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <StoreBadge type="google-play" palette="dark" />
          <StoreBadge type="app-store" palette="dark" />
          <StoreBadge type="app-gallery" palette="dark" />
        </div>
      </div>
    </footer>
  );
}

Responsive Layout

import * as React from 'react';
import { StoreBadge } from '@xsolla/xui-store-badge';

export default function ResponsiveBadges() {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      gap: 12,
      alignItems: 'center',
    }}>
      <StoreBadge type="google-play" />
      <StoreBadge type="app-store" />
    </div>
  );
}

API Reference

StoreBadge

StoreBadgeProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | type | "google-play" \| "app-store" \| "app-gallery" | - | Store type to display. | | palette | "dark" \| "light" | "dark" | Color scheme. | | onPress | () => void | - | Click handler for the badge. | | data-testid | string | - | Test identifier. | | className | string | - | CSS class name. |

Badge Specifications

| Dimension | Value | | :-------- | :---- | | Height | 87px | | Min Width | 253px | | Border Radius | 11px | | Border Width | 2px | | Padding | 20px horizontal |

Palette Styles

| Palette | Background | Border | | :------ | :--------- | :----- | | dark | #100f0d | #a6a6a6 | | light | #ffffff | #000000 |

Store Types

| Type | Description | | :--- | :---------- | | google-play | Google Play Store badge | | app-store | Apple App Store badge | | app-gallery | Huawei App Gallery badge |

Use Cases

• Mobile app landing pages
• Website footers
• Marketing materials
• App download prompts
• Multi-platform app promotion

Accessibility

• Badges have appropriate alt text for screen readers
• Clickable badges show cursor pointer
• Focus states are visible for keyboard navigation
• Link behavior when onPress is provided