Download Button
The Download Button renders a recognisable app-store badge for Google Play, Apple App Store, or Huawei AppGallery. On desktop and tablet screens it displays the full branded badge artwork; on mobile it collapses to the store’s logo icon only, keeping the layout compact.
The store, size, and variant, and
Loading Code Block...Full example
Section titled “Full example”A basic download button targeting Google Play with the default brand variant.
Loading Code Block...Stores
Section titled “Stores”The store prop determines which app-store badge is rendered. Three stores are supported: google, apple, and huawei. Each store has its own branded artwork and logo icon.
Loading Code Block...Two sizes are available: md (40px height) and lg (45px height). The button width is fixed at 140px (max 180px) on desktop and auto-sizes on mobile.
Loading Code Block...Variants
Section titled “Variants”The variant prop controls the visual style of the button. Use brand for the standard dark badge or outline for a lighter, bordered appearance that works well on dark backgrounds. Use the store dropdown to swap badge artwork — the code snippet updates to match.
Loading Code Block...Responsive behavior
Section titled “Responsive behavior”The Download Button adapts automatically based on viewport width.
| Viewport | Layout |
|---|---|
Below md (~768 px) | Only the store logo icon is shown (compact mobile layout). |
md and above | Full branded badge artwork is displayed inside a bordered container. |
Under the hood, the component renders two sibling <div> elements — the full badge is wrapped in hidden md:flex and the logo icon is wrapped in flex md:hidden, so only one is visible at any breakpoint. The desktop badge SVG uses the same sizeStyles lookup as the mobile logo, so React and Vue render at identical pixel dimensions across md and lg.
Layout anatomy
Section titled “Layout anatomy”Desktop / Tablet (≥ 768px):┌────────────────────────────────┐│ ┌──────────────────────────┐ ││ │ Full Badge Artwork │ ││ │ (w: 140px, max: 180px) │ ││ │ with variant styling │ ││ └──────────────────────────┘ │└────────────────────────────────┘
Mobile (< 768px):┌──────────┐│ Logo ││ Icon │└──────────┘DownloadButton Props
Section titled “DownloadButton Props”Vue Events
| Event | Default | Type | Description |
|---|---|---|---|
| onClick | - | () => void | Emitted when the button is clicked. Listen with @on-click to handle navigation to the app store listing. |
Variant styling reference
Section titled “Variant styling reference”| Variant | Background | Border | Best used on |
|---|---|---|---|
brand | bg-neutral-900 | border border-neutral-400 | Light backgrounds |
outline | bg-white | border border-neutral-900 | Dark or coloured backgrounds |
Accessibility
Section titled “Accessibility”- The component renders a
<div>with anonClick/@on-clickhandler. For better semantics, wrap it in an<a>tag pointing to the store URL, or setrole="link"andtabindex="0"on the container. - Ensure the store badge conveys the download action to screen readers — consider adding
aria-label(e.g.aria-label="Download on Google Play") on the wrapping element. - The mobile logo icon is purely visual; it inherits the parent click handler and does not need separate interactive treatment.