Mobile app store button components

FREE

Free and open-source React mobile app store button components built for modern applications and websites. These mobile app store buttons are built using React Aria and styled with Tailwind CSS.

Installation

You can add this mobile app store button component using our CLI or manually:

npx untitledui@latest add app-store-buttons

Mobile app store button examples

Below are examples and variations of this mobile app store button component:

Outline button examples

Below are some outline versions of the mobile app store button component.

API reference

AppStoreButton

Import AppStoreButton from @/components/base/buttons/app-store-buttons-outline. Renders a <a> element.

AppStoreButton props
PropTypeDefaultDescription
size
"md""lg"
"md"Controls the rendered width and height of the badge.

Also accepts all standard anchor attributes, all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

AppStoreButton

Import AppStoreButton from @/components/base/buttons/app-store-buttons. Renders a <a> element.

AppStoreButton props
PropTypeDefaultDescription
size
"md""lg"
"md"Controls the rendered width and height of the badge.

Also accepts all standard anchor attributes, all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

GalaxyStoreButton

Import GalaxyStoreButton from @/components/base/buttons/app-store-buttons-outline. Renders a <a> element.

GalaxyStoreButton props
PropTypeDefaultDescription
size
"md""lg"
"md"Controls the rendered width and height of the badge.

Also accepts all standard anchor attributes, all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

GalaxyStoreButton

Import GalaxyStoreButton from @/components/base/buttons/app-store-buttons. Renders a <a> element.

GalaxyStoreButton props
PropTypeDefaultDescription
size
"md""lg"
"md"Controls the rendered width and height of the badge.

Also accepts all standard anchor attributes, all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

GooglePlayButton

Import GooglePlayButton from @/components/base/buttons/app-store-buttons-outline. Renders a <a> element.

GooglePlayButton props
PropTypeDefaultDescription
size
"md""lg"
"md"Controls the rendered width and height of the badge.

Also accepts all standard anchor attributes, all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

GooglePlayButton

Import GooglePlayButton from @/components/base/buttons/app-store-buttons. Renders a <a> element.

GooglePlayButton props
PropTypeDefaultDescription
size
"md""lg"
"md"Controls the rendered width and height of the badge.

Also accepts all standard anchor attributes, all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

GooglePlayWhiteButton

Import GooglePlayWhiteButton from @/components/base/buttons/app-store-buttons. Renders a <a> element.

GooglePlayWhiteButton props
PropTypeDefaultDescription
size
"md""lg"
"md"Controls the rendered width and height of the badge.

Also accepts all standard anchor attributes, all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

FAQs

Please refer to our frequently asked questions page for more.

There are four buttons: GooglePlayButton, AppStoreButton, GalaxyStoreButton and AppGalleryButton. Each one comes in a filled version from app-store-buttons.tsx and an outline version from app-store-buttons-outline.tsx.

Each button renders an a tag with href="#" by default. Pass your store URL as href, plus any other anchor attributes like target and rel; your props override the defaults.

Every button supports "md" and "lg" through the size prop. The default is "md". "md" buttons are 40px tall and "lg" buttons are 44px tall, and the width depends on the store's badge.

Both files export components with the same names, so rename one set when importing, for example import { AppStoreButton as AppStoreButtonOutline } from "@/components/base/buttons/app-store-buttons-outline", as the examples on this page do.

The outline buttons draw the logo and text with currentColor and default to text-fg-primary, so they adapt to light and dark mode. Pass a text color class through className to change the logo and text color. The filled buttons always use a black background.

Yes. Each button has a default aria-label that matches its badge text, such as "Download on the App Store" or "Get it on Google Play", and a visible focus ring for keyboard users. Pass your own aria-label to override it, for example to name your app.

InputsProgress indicators