Dual Download Button

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. I’ll get back to you as soon as possible.