App Store Badge

Description

AppStoreBadge is a single-element component that renders the official branded download CTA for app stores, browser extension marketplaces, and music services. It is rendered as an <a> by default and ships with twelve brand presets (app-store, google-play, galaxy-store, shopify-store, spotify, add-on, chrome-web-store, app-gallery, windows, amazon-store, microsoft, youtube-music), each one carrying its own wordmark and subtitle copy.

Reach for it on landing pages, marketing footers, and CTA sections where the goal is to send visitors to a specific storefront. The brand glyph, subtitle, and title follow each store's brand guidelines, so the badge reads as a recognizable destination link without forcing you to ship raw SVGs or hand-tune spacing.

Don't use AppStoreBadge for generic in-product CTAs that don't link to an external store; reach for Button instead. If the surface is a passive label, count, or category tag, use Badge. When dropping the badge onto a dark surface, switch to variant="white" rather than overriding colors via className so the wordmark stays on-brand.

Installation

pnpm dlx @create-ui/cli add app-store-badge

Usage

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

<AppStoreBadge brand="app-store" href="https://apps.apple.com/..." />

Examples

Brands

brand is required and selects the wordmark + subtitle preset. Twelve presets ship out of the box; pick the one matching the store your link points to.

Variants

variant="black" (default) is the standard treatment for light surfaces; variant="white" is meant for dark headers, footers, and CTA panels so the wordmark stays legible.

Appearance

appearance="filled" (default) paints the wordmark on a solid surface, the canonical store treatment. appearance="outline" strips the fill and renders a hairline pill, useful when the badge needs to sit among text links rather than dominate as a CTA.

Icon Only

iconOnly drops the subtitle and title and renders only the brand glyph in a square footprint, which works well for compact footers, app switchers, and toolbars. Always pair with an aria-label so screen readers can announce the destination.

In Surface

A typical "Get the app" CTA: a dark panel with a heading, a supporting line, and a pair of variant="white" badges. This is the realistic placement the white variant was designed for.

Accessibility

AppStoreBadge renders as a native <a> element, so keyboard interaction comes from the browser's anchor behavior:

ARIA notes:

• The component sets no explicit ARIA role; the implicit <a> link role is used.
• For default (non-iconOnly) badges, the visible subtitle + title text serves as the accessible name, so no aria-label is required.
• When iconOnly is set, the visible text disappears. Always provide an aria-label describing the destination (e.g. aria-label="Download on the App Store").
• Pair the badge with the appropriate rel="noopener noreferrer" and target="_blank" when pointing to an external store, per standard external-link practice.

Styling

Tailwind override: pass className to merge Tailwind classes with the component's CVA classes (via cn()):

<AppStoreBadge brand="app-store" className="h-14" />

Data slots and attributes: the component sets one slot for CSS targeting:

• data-slot="app-store-badge" on the root element.

Target the badge in CSS:

[data-slot="app-store-badge"] {
  /* … */
}

Related Components

• Badge: passive label for statuses, counts, and metadata. Reach for it when no store branding is involved.
• Button: use this for in-product CTAs that don't link to an external store.
• Logo: use this for a standalone brand mark (e.g. navbar logo) rather than a store CTA.

API Reference

AppStoreBadge

Branded download link for app stores, browser extension marketplaces, and music services. Extends React.ComponentProps<"a">, so any standard anchor attribute (href, target, rel, onClick, aria-*, etc.) is accepted.

Props

Variants