# App Store Buttons

Download buttons for the App Store, Google Play, Galaxy Store, Mac App Store,
Microsoft Store and Chrome Web Store.

## Usage

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

```tsx
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 and repeats its wording, so a screen
reader announces "Download on the App Store".

## Exports

- `AppStoreButton`
- `GooglePlayButton`
- `GalaxyStoreButton`
- `MacAppStoreButton`
- `MicrosoftStoreButton`
- `ChromeWebStoreButton`

## Dark and light

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

```tsx
<AppStoreButton href="#" />
<AppStoreButton variant="light" href="#" />
```

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

`ChromeWebStoreButton` takes no variant. Google publishes that badge on a white
slab with grey type and publishes no dark version, so it draws its own
background.

## Sizes

`sm`, `md` and `lg`, starting at the 40 pixels the artwork is published at.
Width follows each badge's own proportions.

```tsx
<AppStoreButton size="sm" href="#" />
<AppStoreButton size="md" href="#" />
<AppStoreButton size="lg" href="#" />
```

## Trademarks

The badges belong to their stores. Each store publishes rules covering a
minimum size, the clear space around the badge, and no recolouring, stretching
or cropping. The component takes no colour or style props.

- Apple: https://developer.apple.com/app-store/marketing/guidelines/
- Google Play: https://play.google.com/intl/en_us/badges/
- Samsung: https://developer.samsung.com/galaxy-store/marketing/badge.html
- Microsoft: https://learn.microsoft.com/en-us/windows/apps/publish/link-to-your-app
- Chrome Web Store: https://developer.chrome.com/docs/webstore/branding

## Source

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

https://github.com/yajesta/ui/blob/main/packages/ui/src/components/AppStoreButtons.tsx