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.

Gold Glass Button · Just Gold Slightly Glass.

Gold Glass Button · Just Gold Slightly Glass.

Categories

More from Arthur Riljak

Related Components

Related Components

Gold Glass Button · Just Gold Slightly Glass.

Categories

More from Arthur Riljak

Related Components

Related Components

Related Components

Related Components