themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.77k stars 395 forks source link

Flowbite button does not have attribute download #1387

Closed Hann1bal closed 1 month ago

Hann1bal commented 1 month ago

Steps to reproduce

Current behavior

<Button href={'data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(tasss))}'} color="gray" className="w-full mb-2" download={"filename.json"}>
 Download Json
 </Button>

I write button for downloading buffered data and it's working but i can't compile. I got the error:

Type '{ children: string; href: string; color: string; className: string; download: string; }' is not assignable to type 'IntrinsicAttributes & { href?: string; color?: keyof FlowbiteColors; fullSized?: boolean; gradientDuoTone?: keyof ButtonGradientDuoToneColors; ... 10 more ...; theme?: { ...; }; } & AsProp<...> & { ...; } & Omit<...> & { ...; }'.
  Property 'download' does not exist on type 'IntrinsicAttributes & { href?: string; color?: keyof FlowbiteColors; fullSized?: boolean; gradientDuoTone?: keyof ButtonGradientDuoToneColors; ... 10 more ...; theme?: { ...; }; } & AsProp<...> & { ...; } & Omit<...> & { ...; }'. Did you mean 'onLoad'?ts(2322)

Expected behavior

In default html button exist "download" attribute .

dhavalveera commented 1 month ago

Hey @Hann1bal

I just checked with default HTML Button with download attribute which didn't worked for me..

Here is an Example which have the download attribute but when you click on button, it's not working at all.

the download attribute works on anchor tag, not on button.

Hann1bal commented 1 month ago

Hey @Hann1bal

I just checked with default HTML Button with download attribute which didn't worked for me..

Here is an Example which have the download attribute but when you click on button, it's not working at all.

the download attribute works on anchor tag, not on button.

Do u use the blob or something else? In few hour I can share example.

SutuSebastian commented 1 month ago

This can be easily solved by casting the Button component as "a" or as Link component if using a framework such as Next.js.

Before:

Screenshot 2024-05-28 at 12 57 08

After

as="a"

Screenshot 2024-05-28 at 12 57 13

as={Link}

Screenshot 2024-05-28 at 12 57 58
SutuSebastian commented 1 month ago

Button itself does not have download attribute by nature, just like @dhavalveera mentioned earlier.

Hann1bal commented 1 month ago

Button itself does not have download attribute by nature, just like @dhavalveera mentioned earlier.

Thank you. It's work.