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.
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.
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").
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.
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.
If you have any questions, need help using the component, or encounter any issues, you can reach out to me at danielgrafix12@gmail.com. I’ll get back to you as soon as possible.
Daniel Moreno
