How to use HTML attributes for components

[FernandoArteaga]

Hello, I am trying for the first time Bits UI, and I started testing with the Button component.

I would like to set some HTML attributes like form or type but the IDE shows me an error. However, it does not show any error when passing data-* to it.

On the other hand, I tested the code in Stackblitz, using the same props and the HTML element rendered correctly without TS complaints. Which makes me wonder if it's a TS problem or am I using the wrong way to do this? Here the link

This is the snippet I am testing

<script lang="ts">
let btnType: 'button' | 'submit' | undefined = 'submit'
// other props
</script>

<Button.Root
	href={href}
	type={href ? undefined : btnType}
	disabled={disabled}
	form={formId}
	class={buttonClass}
	data-sveltekit-preload-data={href ? 'tap' : undefined}
	onclick={onClickAction}
>
	{#if icon}
		<div class="mr-1">
			{@render icon()}
		</div>
	{/if}
	{@render children?.()}
</Button.Root>

Thanks for any help on this 😃

[shyakadavis]

@FernandoArteaga what TypeScript error are you getting?

Here's a guess: Your types are narrow/short. i.e. A button's type can be:

type Button = {
	type?: 'button' | 'submit' | 'reset' | null | undefined
}

Try extending btnType to include those.

---

Or better yet, refer to how shadcn-svelte is typing all in a simpler, straightforward way. https://github.com/huntabyte/shadcn-svelte/blob/next/sites/docs/src/lib/registry/new-york/ui/button/button.svelte#L35

[FernandoArteaga]

hey @shyakadavis thanks for answering, I tried extending the types with the example you provided above, and also with the shadcn-svelte "way" by using these types import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
But It seems the root cause is from the bits-ui ButtonRootProps, it is explicitly omitting the "type" and href attributes

// node_modules/.pnpm/[email protected][email protected]/node_modules/bits-ui/dist/bits/button/types.d.ts

import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
import type { WithoutChildren } from "svelte-toolbelt";
import type { WithChildren } from "../../shared/index.js";
export type ButtonRootPropsWithoutHTML = WithChildren<{
    ref?: HTMLElement | null;
}>;
type AnchorElement = ButtonRootPropsWithoutHTML & WithoutChildren<Omit<HTMLAnchorAttributes, "href" | "type">> & {
    href: HTMLAnchorAttributes["href"];
    type?: never;
    disabled?: HTMLButtonAttributes["disabled"];
};
type ButtonElement = ButtonRootPropsWithoutHTML & WithoutChildren<Omit<HTMLButtonAttributes, "type" | "href">> & {
    type?: HTMLButtonAttributes["type"];
    href?: never;
    disabled?: HTMLButtonAttributes["disabled"];
};
export type ButtonRootProps = AnchorElement | ButtonElement;
export {};

[shyakadavis]

That's because a button can be a normal button or anchor tag <a>. It becomes an a tag when you provide an href and defaults to a button without.

Kindly provide a minimal repro with the issue you're running into.