# App Store Button

> Black App Store badge with the Apple logo and two-line text, rendered as a link.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/app-store-button
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/app-store-button.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/app-store-button-demo.tsx"
import { AppStoreButton } from "@/components/app-store-button"

export default function AppStoreButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 rounded-2xl bg-zinc-100 p-10 dark:bg-zinc-900">
      <AppStoreButton />
      <AppStoreButton topText="Available on the" bottomText="Mac App Store" />
    </div>
  )
}
```

## Source

```tsx title="components/app-store-button.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface AppStoreButtonProps extends React.ComponentProps<"a"> {
  topText?: string
  bottomText?: string
}

export function AppStoreButton({
  topText = "Download on the",
  bottomText = "App Store",
  className,
  href = "#",
  ...props
}: AppStoreButtonProps) {
  return (
    <a
      href={href}
      className={cn(
        "inline-flex h-14 items-center gap-2.5 rounded-xl border border-white/25 bg-black px-4 text-white",
        "transition-[transform,background-color] duration-150 hover:bg-neutral-900 active:scale-[0.98]",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
        className
      )}
      {...props}
    >
      <svg aria-hidden viewBox="0 0 24 24" className="size-7 shrink-0 fill-current">
        <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
      </svg>
      <span className="flex flex-col items-start leading-none">
        <span className="text-[10px] font-medium tracking-wide">{topText}</span>
        <span className="mt-1 text-xl font-semibold tracking-tight">{bottomText}</span>
      </span>
    </a>
  )
}
```