App Store Badge

Component

About

Download badges from the Create UI design system for 12 stores, including the App Store, Google Play, Chrome Web Store, Microsoft and Spotify. Black or white, filled or outline, with an icon-only mode.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds App Store Badge to your project and fits it to your theme.

Code

How App Store Badge is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AppStoreBadge } from "@/components/ui/app-store-badge"

export default function AppStoreBadgeDemo() {
  return (
    <div className="flex flex-col items-center gap-6">
      <div className="flex flex-wrap items-center gap-3">
        <AppStoreBadge brand="app-store" href="#" iconOnly />
        <AppStoreBadge
          brand="app-gallery"
          href="#"
          variant="black"
          appearance="outline"
        />
        <AppStoreBadge brand="chrome-web-store" href="#" />
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <AppStoreBadge brand="windows" href="#" iconOnly />
        <AppStoreBadge brand="google-play" href="#" />
        <AppStoreBadge brand="microsoft" href="#" />
        <AppStoreBadge
          brand="amazon-store"
          href="#"
          variant="black"
          appearance="outline"
        />
        <AppStoreBadge brand="spotify" href="#" />
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <AppStoreBadge
          brand="youtube-music"
          href="#"
          variant="black"
          appearance="outline"
        />
        <AppStoreBadge brand="galaxy-store" href="#" />
        <AppStoreBadge brand="shopify-store" href="#" iconOnly />
      </div>
    </div>
  )
}