Landing Page App Store Button
- Updated on
This component displays app store download buttons with proper branding. It supports multiple app stores and black/white variants.
Usage
import { LandingAppStoreButton } from '@/components/landing/app-store-button/LandingAppStoreButton';
<LandingAppStoreButton appStore="ios-appstore" />
Examples
Use as Link
Use with onClick Event
You can also use the onClick event handler for custom interactions.
Explicit Theme Variant
You can explicitly set the button variant to white or black, overriding the default theme.
Different Sizes
The button supports different sizes, corresponding to regular <Button> component sizes.
Custom Styling
You can add custom styling using the className prop.
API Reference
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| appStore | 'ios-appstore' ǀ 'mac-appstore' ǀ 'microsoft-store' ǀ 'google-playstore' | Yes | - |
| variant | 'white' ǀ 'black' | No | 'black' |
| size | 'default' ǀ 'sm' ǀ 'lg' ǀ 'xl' | No | 'default' |
| onClick | (event: React.MouseEvent<HTMLButtonElement>) => void | No | - |
| asChild | boolean | No | false |
| className | string | No | '' |
More Examples
For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.