FileButton

A Button that opens the file picker and hands over the file chosen. The picker is hidden and out of the tab order: only the button is pressed. Every Button prop works — variant, size, icons, loading.

Pick a file

Try it: the name of what you pick shows beside it. Picking the same file twice still counts.

Nothing picked

import { FileButton } from "@/components/shared/file-button";

<FileButton
  accept="image/*"
  onFile={(file) => upload(file)}
  variant="secondary"
  size="sm"
  leadingIcon={ImagePlus}
>
  Add logo
</FileButton>

Busy

While the file goes up, loading puts the spinner in the icon's place and ignores presses.

<FileButton accept="image/*" onFile={upload} loading variant="secondary" size="sm" leadingIcon={ImagePlus}>
  Add logo
</FileButton>

API reference

Prop	Type	Default	Description
accept	string	—	What the picker offers, as an input's accept.
onFile	(file: File) => void	—	Takes the file picked.
…Button props	ButtonProps	—	variant, size, leadingIcon, loading, iconOnly with aria-label — all as on Button. It's always type="button".

Guidelines

Say what the file is for — “Add logo”, “Attach a price list” — not “Upload” or “Choose file”.
Check the file again on the server; accept only narrows what the picker shows.