When to use it

Use DownloadItem when the file itself is the action. It works well for manuals, compliance PDFs, assembly guides, and product attachments that need a clearer presentation than a plain text link.

Choose the card variant when the file should stand on its own. Choose the inline variant when it is part of a denser list.

Composition notes

label and url are the core inputs. Add fileType when the file format matters to the visitor before they click.

variant="card" gives the download more weight. variant="inline" keeps the row compact for specification panels and grouped attachment lists.

Pass icon when a download row needs a local branded glyph or a different document cue without replacing the primitive.

Use classNames when a storefront needs local root, content, label, badge, or icon styling without creating a wrapper component just to restyle the primitive.

Behavior and theming guidance

Keep labels explicit so the visitor knows what opens before clicking. File type badges work best as a supplement, not the only description.

Prefer the default icon path for system-wide consistency. Reach for the icon prop when a specific document list needs local visual parity that should not change the rest of the storefront icon set.

Prefer classNames over descendant-selector wrapper hacks when a brand needs local polish. The shared slots are the supported styling seam.