StoreBadge

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

Imports

import {
  StoreBadge,
  type StoreBadgeProps,
  type StoreType,
  type StoreBadgePalette,
} from "@xsolla/xui-store-badge";

Quick start

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

export default function QuickStart() {
  return <StoreBadge type="google-play" palette="dark" />;
}

API Reference

<StoreBadge>

| Prop | Type | Default | Description | | ------------- | ----------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------- | | type | "google-play" \| "app-store" \| "app-gallery" | — | Store to render. No default — when omitted, the badge renders an empty container with no store artwork. | | palette | "dark" \| "light" | "dark" | Colour scheme. dark = black background; light = white background. | | onPress | () => void | — | Press handler. When provided, the cursor switches to pointer. | | data-testid | string | — | Test identifier. | | testID | string | — | Test ID for testing frameworks. On web this renders as data-testid; on React Native it renders as testID. | | className | string | — | CSS class for the container. | | style | CSSProperties | — | Inline style overrides. |

Additional props are spread onto the inner Box (e.g. layout overrides).

Specifications

| Dimension | Value | | ------------------ | ----- | | Height | 87px | | Min width | 253px | | Border radius | 11px | | Border width | 2px | | Horizontal padding | 20px |

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

Examples

All stores

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

Wrap the badge in a semantic anchor so assistive technology announces the destination.

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

export default function ClickableBadges() {
  return (
    <a
      href="https://play.google.com"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Get it on Google Play"
      style={{ display: "inline-block" }}
    >
      <StoreBadge type="google-play" />
    </a>
  );
}

Accessibility

• The internal SVG store artwork inherits its data-testid for testing.
• Wrap clickable badges in semantic affordances (e.g. an anchor tag) when linking to a store URL so assistive technology announces the destination.
• Ensure surrounding context (a heading or descriptive text) describes the platform when the badge is the only signal.