Kappa / Download Trigger

<script setup>
import { Download } from "@lucide/vue";
import { DownloadTrigger } from "@dicehub/kappa/components/download-trigger";

const configuration = JSON.stringify(
  { theme: "kappa", units: "metric" },
  null,
  2,
);
</script>

<template>
  <DownloadTrigger
    :data="configuration"
    file-name="workspace-config.json"
    mime-type="application/json"
    :icon="Download"
    variant="primary"
  >
    Download configuration
  </DownloadTrigger>
</template>

Installation

Download Trigger is part of the main Kappa package. It uses Ark UI's download utility and the shared Kappa Button visual contract.

Barrel

import {
  DownloadTrigger,
  useDownload,
} from "@dicehub/kappa";

Granular

import {
  DownloadTrigger,
  useDownload,
} from "@dicehub/kappa/components/download-trigger";

Usage

Provide the content, the file name, and the media type. Activation starts one native browser download.

<script setup>
import { DownloadTrigger } from "@dicehub/kappa/components/download-trigger";
</script>

<template>
  <DownloadTrigger
    data="Kappa 0.2 release notes"
    file-name="release-notes.txt"
    mime-type="text/plain"
  >
    Download release notes
  </DownloadTrigger>
</template>

Composition

Download composition

DownloadTrigger <button>
├── icon / spinner (optional)
└── default slot

The component renders one native button. Ark UI converts the supplied value into a downloadable file only after user activation. Kappa supplies Button sizing, variants, focus, disabled, and busy states.

Labels align by capital height and baseline where CSS text-box trimming is supported. Other browsers keep the standard centered line box. Text is not clipped.

<script setup>
import { Download } from "@lucide/vue";
import { DownloadTrigger } from "@dicehub/kappa/components/download-trigger";

const configuration = JSON.stringify(
  { theme: "kappa", units: "metric" },
  null,
  2,
);
</script>

<template>
  <DownloadTrigger
    :data="configuration"
    file-name="workspace-config.json"
    mime-type="application/json"
    :icon="Download"
  >
    Export JSON
  </DownloadTrigger>
</template>

Async Data

Pass a function when the file must be built at activation time.

<script setup>
import { Download } from "@lucide/vue";
import { DownloadTrigger } from "@dicehub/kappa/components/download-trigger";

const createCsv = async () =>
  new Blob(["step,value\nmesh,complete\nsolve,queued\n"], {
    type: "text/csv",
  });
</script>

<template>
  <DownloadTrigger
    :data="createCsv"
    file-name="run-status.csv"
    mime-type="text/csv"
    :icon="Download"
  >
    Build and download CSV
  </DownloadTrigger>
</template>

States

Disabled and loading triggers cannot start a download.

default

disabled

loading

<script setup>
import { DownloadTrigger } from "@dicehub/kappa/components/download-trigger";
</script>

<template>
  <div class="download-states">
    <div>
      <code>default</code>
      <DownloadTrigger data="ready" file-name="ready.txt" mime-type="text/plain">
        Download
      </DownloadTrigger>
    </div>
    <div>
      <code>disabled</code>
      <DownloadTrigger disabled data="blocked" file-name="blocked.txt" mime-type="text/plain">
        Download
      </DownloadTrigger>
    </div>
    <div>
      <code>loading</code>
      <DownloadTrigger loading data="pending" file-name="pending.txt" mime-type="text/plain">
        Preparing
      </DownloadTrigger>
    </div>
  </div>
</template>

<style scoped>
.download-states {
  display: grid;
  gap: 0.625rem;
}

.download-states > div {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}
</style>

Custom Child

Use asChild to merge the download behavior onto one custom button.

<script setup>
import { DownloadTrigger } from "@dicehub/kappa/components/download-trigger";
</script>

<template>
  <DownloadTrigger
    as-child
    data="custom"
    file-name="custom.txt"
    mime-type="text/plain"
  >
    <button class="custom-download">Save a local copy</button>
  </DownloadTrigger>
</template>

<style scoped>
.custom-download {
  border-style: dashed;
}
</style>

Accessibility

Use a clear label that identifies the downloaded content or format.
Keep the required file name extension consistent with the media type.
Use loading while external work is active, and announce longer preparation elsewhere.
Do not use the trigger for navigation. Use Link for a stable remote file URL.

API Reference

DownloadTrigger

Prop	Type	Default	Description
`data`	`string \| Blob \| File \| (() => value \| Promise<value>)`	`—`	Required content or producer used to create the downloaded file.
`fileName`	`string`	`—`	Required file name presented to the browser download manager.
`mimeType`	`FileMimeType`	`—`	Required media type for string and Blob data.
`variant`	`ButtonVariant`	`"secondary"`	Uses the same visual variants as Button.
`size / shape / icon / iconPosition / fullWidth`	`ButtonVisualProps`	`Button defaults`	Uses the shared Kappa button visual contract with compact 0.875rem icons at the default base size.
`disabled`	`boolean`	`false`	Prevents download activation.
`loading`	`boolean`	`false`	Shows a busy indicator and prevents activation while data is prepared externally.
`asChild`	`boolean`	`false`	Merges download behavior and Kappa attributes onto one child button.

Slots

Slot	Description
`default`	Button label, or one complete child element when asChild is enabled.

Data Attributes

Attribute	Value	Description
`data-slot`	`"download-trigger"`	Identifies the button root.
`data-variant`	`ButtonVariant`	Resolved Button treatment.
`data-size`	`ButtonSize`	Resolved compact control size.
`data-shape`	`ButtonShape`	Resolved Button geometry.
`data-loading`	`present`	Present during a controlled busy state.

Exports

Export	Description
`DownloadTrigger`	Ark-backed Kappa download button.
`useDownload`	Ark UI composable for programmatic downloads.
`DownloadTriggerProps / DownloadTriggerSlots`	Public Vue contracts.
`DownloadableData / UseDownloadProps / UseDownloadReturn`	Ark download data and composable contracts.

Download Trigger