Skip to content

Button with link doesn't disabled #1872

@Dalidos

Description

@Dalidos

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.4

Relevant 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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions