Build · New
Store Badge
The official app store badges as links to your app's page, exactly as each store supplies them: never recolored, cropped or translated.
Preview
Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.
Installation
SoonInstalling from the registry opens at launch. Until then the command below is what it will be.
npx shadcn@latest add @ritla/store-badgeUsage
import { StoreBadge } from "@/components/ui/store-badge";<StoreBadge store="app-store" href="https://apps.apple.com/app/id…" />
<StoreBadge store="google-play" href="https://play.google.com/store/apps/details?id=…" />Examples
Stores and styles
brand in black on any surface, outline on light surfaces only. The Galaxy Store badge comes when its official artwork arrives.
Sizes
lg 44px tall (default) and md 40px; the width follows each badge.
API reference
StoreBadge
Any other <a> prop passes through (target, rel…).
| Prop | Type | Default | Description |
|---|---|---|---|
store | "app-store" | "google-play" | "mac-app-store" | "appgallery" | "microsoft" | "amazon-store" | "f-droid" | Figma's Store. | |
href | string | Required. Your app's page in the store. | |
variant | "brand" | "outline" | "brand" | Figma's Style. |
size | "md" | "lg" | "lg" | Figma's Size: 40 and 44px. |
Accessibility
Keyboard
Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.
| Key | Action |
|---|---|
| TabEnter | A plain link: Tab reaches it, Enter opens it. |
ARIA
- The link's name is the badge text in English (“Download on the App Store”), on an image with
lang="en", so screen readers read it in English even on an Arabic page.
Arabic and RTL notes
Mirrors
- The order of badges in a row follows the page direction.
Does not mirror
- The badge itself never mirrors or gets translated: Arabic badges come from the stores when available (Figma hasn't received them yet).
- Numerals
- Badges hold no numbers.
- Arabic typography
- The text is part of the official artwork, so the Kanz fonts don't change it.
- Mixed-direction text
- A badge is an image, unaffected by direction; put badges in a flex row so the order follows the language.