---
title: "Dual Download Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Daniel Moreno · Buttons. Dual Download Button is a high-performance UI component designed for creators who need a professional way to share assets."
canonical: "https://framer.elliotli.dev/component/dual-download-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Dual Download Button

# Dual Download Button

Downloads with clean file name

[View on Framer](https://framer.com/marketplace/components/dual-download-button/?via=elliot-li)

![Dual Download Button preview image 1](https://framer.elliotli.dev/og/component/dual-download-button/cc988fc3408624c6/1600x1200.jpg)

## Summary

Dual Download Button is a high-performance UI component designed for creators who need a professional way to share assets.

## Description

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-1y2o5eqg-sd5K1yiLJ8gwWK6mCWRVY2jypT8Rpz)](https://www.framer.com/marketplace/templates/brandframe/)

**Dual Download Button** is a high-performance UI component designed for creators who need a professional way to share assets. It solves the common frustration of random file naming by including a custom **Download Name** field, allowing you to specify exactly how the file will appear on the user's device. Wrapped in a sleek "Bounding Box" aesthetic inspired by design software, it offers a compact and interactive solution for providing two distinct download options in a single element.

## Key Features

-   **Custom File Naming:** Take full control by defining the exact name for each downloaded file.
    
-   **Dual Option Reveal:** A space-saving button that expands to show two separate download paths.
    
-   **Bounding Box Aesthetic:** Mimics professional editor layouts with customizable corner handles.
    
-   **High-End Micro-interactions:** Smooth spring animations that respond to clicks and hovers for a tactile feel.
    

## Properties

### Download Content

-   **Primary Label:** The main text displayed on the collapsed button (e.g., "Download").
    
-   **Option 1 & 2 Labels:** Custom text for the revealed choices (e.g., ".png" and ".svg").
    
-   **File URL:** The direct link or path to your asset.
    
-   **Download Name:** The specific name the file will have once downloaded (e.g., "Brand-Logo-Vector").
    

### Color Properties

-   **Primary Accent:** The main color of the button and selection hovers.
    
-   **Primary Hover:** A lighter variant for the initial button hover state.
    
-   **Selection Frame:** Sets the color for the Bounding Box lines and corner handles.
    
-   **Menu Background:** The primary dark color of the expanded options list.
    
-   **Header Background:** The secondary color for the top section of the expanded menu.
    

### Best Practices

-   **Include Extensions:** When setting the **Download Name**, remember to include the extension (e.g., "Logo.svg") to ensure the OS recognizes the file correctly.
    
-   **Clear Labels:** Use concise text for the option labels to maintain the clean, editor-style UI.
    
-   **Visual Hierarchy:** Use the Header Background color to create a subtle separation between the main label and the options.
    

### Support & Assistance

If you have any questions, need help using the component, or encounter any issues, you can reach out to me at [**danielgrafix12@gmail.com**](mailto:danielgrafix12@gmail.com). I’ll get back to you as soon as possible.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5730

## Details

- **Author**: Daniel Moreno
- **Published**: 2026-03-04
- **Updated**: 2026-06-04
- **Added**: 2026-02-27
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow