Dual Download Button

Show Preview
Dual Download Button
Dual Download Button

About 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.

From Daniel Moreno

Flux Corner Button
Flap Split Reveal
Smart Contact Link
Gilt Navbar

Related Components

Metal Rim Button
Social Widget
Shift Button
Theme Toggle PLUS