App Store Buttons

Usage

One export per store. Each renders as a link. Anything you would put on an anchor works.

import { AppStoreButton, GooglePlayButton } from "@oscarkalid/ui";
 
<GooglePlayButton href="https://play.google.com/store/apps/details?id=..." />
<AppStoreButton href="https://apps.apple.com/app/id..." />

The accessible name comes with the badge. A screen reader announces "Download on the App Store".

Dark and light

Every store publishes both. Pick the one that contrasts with what it sits on.

The badge colour does not follow the theme. A dark badge stays black on a light page, which is what the guidelines specify.

Sizes

Heights scaled from the 40 pixels the artwork is published at. Width follows the badge's own proportions.

One store at a time

Each badge on its own, at the largest size.

Google publishes this one on a white slab with grey type, and publishes no dark version, so it draws its own background and takes no variant.

Trademarks

These badges belong to Apple, Google and Samsung. Each publishes rules: a minimum size, a margin of clear space, and no recolouring, stretching or cropping. The component takes no colour or style props and is black in both themes.

The rules change. Check them before one of these goes on a real listing.

• Apple marketing guidelines
• Google Play badge guidelines
• Samsung Galaxy Store badge

Source

The buttons and the badge artwork are separate files. The artwork keeps its lettering as shapes, since the wordmarks use typefaces the library does not ship.

packages/ui/src/components/AppStoreButtons.tsx    # the buttons
packages/ui/src/components/storeBadgeArt.tsx     # the artwork

Last updated: 12 August 2026