DocsDocsSDKs

DownloadItem

React SDK guidance for DownloadItem.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

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.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/storefront.
  • Playground route: /sandbox?component=DownloadItem.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

DownloadItem

# DownloadItem > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/storefront`. - Live playground: [/components/storefront/download-item](https://sdk.enad.io/components/storefront/download-item). ## 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. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/storefront`. - Playground route: /sandbox?component=DownloadItem. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes