-
Notifications
You must be signed in to change notification settings - Fork 325
Open
Description
Description
Hi!
When a <Button> has an href, the disabled prop doesn’t work because the component always renders an <a> tag.
I’d like to suggest a small fix inside Button.svelte:
// add disabled = false in condition
{#if restProps.href !== undefined && !disabled}
<a {...restProps} class={btnCls}>
{@render children?.()}
</a>
{:else if tag === "button"}
...This way, when a button has an href and is disabled, it renders a real disabled <button> instead of an <a> tag.
For the moment, I can bypass this bug like this:
<Button
href={isDisabled ? 'my/custom/link' : undefined}
disabled={isDisabled}
>
Go to my custom link
</Button>Let me know if needed — I can open a PR. 😊
Minimal Reproduction
this doesn't work. When it's disabled, I can click and go to the link
<Button
href='my/custom/link'
disabled={isDisabled}
>
Go to my custom link
</Button>Steps to Reproduce
disables a button with a link
Environment
System:
OS: Linux 6.14 Ubuntu 24.04.3 LTS 24.04.3 LTS (Noble Numbat)
CPU: (8) x64 Intel(R) Core(TM) i7-4770 CPU @ 3.40GHz
Memory: 17.74 GB / 31.25 GB
Container: Yes
Shell: 5.2.21 - /bin/bash
Binaries:
Node: 25.0.0 - /home/dalidos/.nvm/versions/node/v25.0.0/bin/node
npm: 11.6.2 - /home/dalidos/.nvm/versions/node/v25.0.0/bin/npm
pnpm: 10.23.0 - /home/dalidos/.nvm/versions/node/v25.0.0/bin/pnpm
Browsers:
Chrome: 141.0.7390.107
Firefox: 145.0.2
Firefox Developer Edition: 145.0.2
npmPackages:
@sveltejs/kit: ^2.47.0 => 2.49.0
flowbite: ^3.1.2 => 3.1.2
flowbite-svelte: ^1.17.4 => 1.28.1
svelte: ^5.40.1 => 5.44.0
vite: ^7.1.10 => 7.2.4Relevant Logs / Console Output
Screenshots / GIF (optional)
No response
Additional Context (optional)
No response
Checklist
- I have searched existing issues and discussions
- I have provided a minimal and runnable reproduction
- I am using the latest version of Flowbite-Svelte
Metadata
Metadata
Assignees
Labels
No labels