File Button — lunaDOM Docs

The <luna-file-button> component provides styled file upload buttons with file type filtering and multiple file support.

Paths

/lunadom/components/file-button/file-button.js

REQUIRED

Basic Usage

Upload File

With Tooltip

Choose Files

Image Upload

📷 Upload Image

Document Upload

📄 Attach Documents

Different Sizes

📎 Small

📎 Medium

📎 Large

Circle Icon Button

Pill Style

🎥 Upload Video

Interactive Example

📁 Select Files

No files selected

Customization

Slots
default - Icon, emoji, or label rendered inside the button.

Attributes
variant - Visual variant (primary, neutral, success, warning, danger). Defaults to 'neutral'.
size - Size preset (sm, md, lg). Defaults to 'md'.
pill - Full pill border-radius.
outline - Transparent background with colored border and text.
circle - Equal width/height with 50% radius (icon-only).
disabled - Disables the button.
accept - File input filter (e.g., "image/*,.pdf").
multiple - Allow selecting multiple files.
aria-label - Accessible label. Defaults to "Attach file".

CSS Variables
--luna-fb-bg - Resting background color
--luna-fb-bg-hover - Hover background color
--luna-fb-bg-active - Active/pressed background color
--luna-fb-color - Label/icon color
--luna-fb-border - Border color
--luna-fb-radius - Border radius override
--luna-fb-focus - Focus ring color
--luna-fb-icon-size - Explicit icon size (defaults to font-size)

Properties
files - The last selected FileList (read-only, null before selection)

Methods
open() - Programmatically open the file picker
clear() - Clear the internal file input value and reset files

Events
luna-change - Fired when files are selected. detail: { files: FileList }
luna-cancel - Fired when picker is closed with no selection (where supported)

Example Code

<luna-file-button variant="primary"> Upload File </luna-file-button>  <luna-file-button variant="primary"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M8.5 1.5A1.5 1.5 0 0 1 10 0h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h4a1.5 1.5 0 0 1 1.5 1.5v1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5a1 1 0 0 0-1-1H9.5v-2z"/> </svg> Upload File </luna-file-button>  <luna-file-button variant="success" accept="image/*"> 📷 Upload Image </luna-file-button>  <luna-file-button variant="neutral" accept=".pdf,.doc,.docx" multiple> 📄 Attach Documents </luna-file-button>  <luna-file-button circle variant="primary" accept="image/*"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2z"/> </svg> </luna-file-button>  <luna-tooltip content="Click to select files"> <luna-file-button variant="primary" multiple> 📁 Choose Files </luna-file-button> </luna-tooltip>  <luna-file-button size="sm" variant="primary">📎 Small</luna-file-button> <luna-file-button size="md" variant="primary">📎 Medium</luna-file-button> <luna-file-button size="lg" variant="primary">📎 Large</luna-file-button>  <luna-file-button pill variant="warning" accept="video/*"> 🎥 Upload Video </luna-file-button>  <luna-file-button outline variant="primary" accept=".zip,.rar"> 📦 Upload Archive </luna-file-button>  <luna-file-button id="file-btn" multiple>Select Files</luna-file-button> <script> const btn = document.getElementById('file-btn'); btn.addEventListener('luna-change', (e) => { const files = Array.from(e.detail.files); console.log('Selected files:', files.map(f => f.name)); // Access individual files files.forEach(file => { console.log(file.name, file.size, file.type); }); }); btn.addEventListener('luna-cancel', () => { console.log('File picker canceled'); }); // Programmatic control btn.open(); // Open file picker btn.clear(); // Clear selection // Check selected files console.log(btn.files); // FileList or null </script>