diff --git a/apps/web/src/components/Preview/Preview.tsx b/apps/web/src/components/Preview/Preview.tsx
index 78f38a16..eb8c7c42 100644
--- a/apps/web/src/components/Preview/Preview.tsx
+++ b/apps/web/src/components/Preview/Preview.tsx
@@ -34,8 +34,7 @@ export const Preview = component$<PreviewProps>(({ url, class: classNames, heigh
 
   const fileUrl = useComputed$(() => `${liveDir}${url}`)
   const iframeSrc = useComputed$(() => {
-    let src = url.replace('[theme-rtl]', `${themeName.value}-${rtl.value ? 'rtl' : 'ltr'}`)
-    src += '?example=true'
+    const src = url.replace('[theme-rtl]', `${themeName.value}-${rtl.value ? 'rtl' : 'ltr'}`)
     return src
   })
 
diff --git a/apps/web/src/generated-examples.ts b/apps/web/src/generated-examples.ts
index adfd7682..26f8e36a 100644
--- a/apps/web/src/generated-examples.ts
+++ b/apps/web/src/generated-examples.ts
@@ -505,7 +505,7 @@ export const examples: Record<string, Example[]> = {
       description: 'You can add a link to a Button component.',
       url: '/examples/[theme-rtl]/button/12-button-as-link',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex gap-2 flex-wrap">\n      <Button href="https://google.com" target="_blank">\n        Google.com\n      </Button>\n      <Button href="/pages/getting-started">Quickstart</Button>\n      <Button href="/" tag={Link}>\n        Internal link\n      </Button>\n    </div>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex gap-2 flex-wrap">\n      <Button href="https://google.com" target="_blank">\n        Google.com\n      </Button>\n      <Button href="/examples/blue-ltr/button/11-button-disabled">Quickstart</Button>\n      <Button href="/examples/blue-ltr/button/13-button-full" tag={Link}>\n        Internal link\n      </Button>\n    </div>\n  )\n})',
       height: '200',
     },
     {
@@ -540,6 +540,14 @@ export const examples: Record<string, Example[]> = {
         "import { component$ } from '@builder.io/qwik'\nimport { Button } from 'flowbite-qwik'\nimport { IconArrowRightOutline } from 'flowbite-qwik-icons'\n\nexport default component$(() => {\n  return (\n    <div class=\"flex gap-2 items-center flex-wrap\">\n      <Button suffix={IconArrowRightOutline}>Choose plan</Button>\n    </div>\n  )\n})",
       height: '200',
     },
+    {
+      title: 'Button with custom tag',
+      description: 'You can use a custom tag for the Button component.',
+      url: '/examples/[theme-rtl]/button/17-button-with-custom-tag',
+      content:
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex gap-2 items-center flex-wrap">\n      <Button tag="div">I\'am a div</Button>\n      <Button tag="span">I\'am a span</Button>\n    </div>\n  )\n})',
+      height: '200',
+    },
   ],
   'button-group': [
     {
@@ -861,7 +869,8 @@ export const examples: Record<string, Example[]> = {
     },
     {
       title: 'User avatar',
-      description: 'This example can be used to show a list of menu items and options when a user is logged into your application.',
+      description:
+        'You can use the `as` prop to set the trigger element to an image. The trigger passed as props should not be a button element as Dropdown use button element internally. This example can be used to show a list of menu items and options when a user is logged into your application.',
       url: '/examples/[theme-rtl]/dropdown/06-dropdown-user-avatar',
       content:
         'import { component$ } from \'@builder.io/qwik\'\nimport { Dropdown } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex gap-5">\n      <Dropdown\n        as={\n          <img\n            class="w-8 h-8 rounded-full"\n            src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"\n            alt="user photo"\n          />\n        }\n      >\n        <Dropdown.Item header>\n          <span class="block text-sm">Bonnie Green</span>\n          <span class="block truncate text-sm font-medium">bonnie@flowbite.com</span>\n        </Dropdown.Item>\n        <Dropdown.Item>Dashboard</Dropdown.Item>\n        <Dropdown.Item>Settings</Dropdown.Item>\n        <Dropdown.Item divider />\n        <Dropdown.Item>Sign out</Dropdown.Item>\n      </Dropdown>\n\n      <Dropdown\n        as={\n          <img\n            class="w-8 h-8 rounded-full"\n            src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"\n            alt="user photo"\n          />\n        }\n      >\n        <Dropdown.Item header>\n          <span class="block text-sm">Bonnie Green</span>\n          <span class="block truncate text-sm font-medium">bonnie@flowbite.com</span>\n        </Dropdown.Item>\n        <Dropdown.Item>Dashboard</Dropdown.Item>\n        <Dropdown.Item>Settings</Dropdown.Item>\n        <Dropdown.Item divider />\n        <Dropdown.Item>Sign out</Dropdown.Item>\n      </Dropdown>\n\n      <Dropdown\n        as={\n          <img\n            class="w-8 h-8 rounded-full"\n            src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"\n            alt="user photo"\n          />\n        }\n      >\n        <Dropdown.Item header>\n          <span class="block text-sm">Bonnie Green</span>\n          <span class="block truncate text-sm font-medium">bonnie@flowbite.com</span>\n        </Dropdown.Item>\n        <Dropdown.Item>Dashboard</Dropdown.Item>\n        <Dropdown.Item>Settings</Dropdown.Item>\n        <Dropdown.Item divider />\n        <Dropdown.Item>Sign out</Dropdown.Item>\n      </Dropdown>\n    </div>\n  )\n})',
@@ -1810,7 +1819,7 @@ export const examples: Record<string, Example[]> = {
         'Wrap the trigger component with the <Tooltip> component and pass the tooltip content to the content prop of the <Tooltip> component.',
       url: '/examples/[theme-rtl]/tooltip/01-default',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center p-8">\n      <Tooltip style="dark" trigger={<Button>Hover me</Button>} content={<div>This is a tooltip</div>} />\n    </div>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center p-8">\n      <Tooltip style="dark">\n        <Button q:slot="trigger">Hover me</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n    </div>\n  )\n})',
       height: '200',
     },
     {
@@ -1818,7 +1827,7 @@ export const examples: Record<string, Example[]> = {
       description: 'Use the style prop to change the style of the tooltip. The default style is light and you can also use dark.',
       url: '/examples/[theme-rtl]/tooltip/02-styles',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center gap-3 p-8">\n      <Tooltip style="dark" trigger={<Button>Dark tooltip</Button>} content={<div>This is a tooltip</div>} />\n\n      <Tooltip style="light" trigger={<Button>Light tooltip</Button>} content={<div>This is a tooltip</div>} />\n\n      <Tooltip style="auto" trigger={<Button>Auto tooltip</Button>} content={<div>This is a tooltip</div>} />\n    </div>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center gap-3 p-8">\n      <Tooltip style="dark">\n        <Button q:slot="trigger">Dark tooltip</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n      <Tooltip style="light">\n        <Button q:slot="trigger">Light tooltip</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n      <Tooltip style="auto">\n        <Button q:slot="trigger">Auto tooltip</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n    </div>\n  )\n})',
       height: '200',
     },
     {
@@ -1827,7 +1836,7 @@ export const examples: Record<string, Example[]> = {
         'Update the placement of the tooltip using the placement prop. The default placement is top and you can also use right, bottom, and left.',
       url: '/examples/[theme-rtl]/tooltip/03-placement',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center gap-3 p-8">\n      <Tooltip placement="top" trigger={<Button>Tooltip top</Button>} content={<div>This is a tooltip</div>} />\n\n      <Tooltip placement="right" trigger={<Button>Tooltip right</Button>} content={<div>This is a tooltip</div>} />\n\n      <Tooltip placement="bottom" trigger={<Button>Tooltip bottom</Button>} content={<div>This is a tooltip</div>} />\n\n      <Tooltip placement="left" trigger={<Button>Tooltip left</Button>} content={<div>This is a tooltip</div>} />\n    </div>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center gap-3 p-8">\n      <Tooltip placement="top">\n        <Button q:slot="trigger">Tooltip top</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n      <Tooltip placement="right">\n        <Button q:slot="trigger">Tooltip right</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n      <Tooltip placement="bottom">\n        <Button q:slot="trigger">Tooltip bottom</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n      <Tooltip placement="left">\n        <Button q:slot="trigger">Tooltip left</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n    </div>\n  )\n})',
       height: '200',
     },
     {
@@ -1836,7 +1845,7 @@ export const examples: Record<string, Example[]> = {
         'Use the trigger prop to change the trigger type of the tooltip if you want to show the tooltip when clicking on the trigger element instead of hovering over it.',
       url: '/examples/[theme-rtl]/tooltip/04-trigger',
       content:
-        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center gap-3 p-8">\n      <Tooltip triggerStrategy="hover" trigger={<Button>Tooltip hover</Button>} content={<div>This is a tooltip</div>} />\n\n      <Tooltip triggerStrategy="click" trigger={<Button>Tooltip click</Button>} content={<div>This is a tooltip</div>} />\n    </div>\n  )\n})',
+        'import { component$ } from \'@builder.io/qwik\'\nimport { Button, Tooltip } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  return (\n    <div class="flex text-center justify-center gap-3 p-8">\n      <Tooltip trigger="hover">\n        <Button q:slot="trigger">Tooltip hover</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n      <Tooltip trigger="click">\n        <Button q:slot="trigger">Tooltip click</Button>\n        <div q:slot="content">This is a tooltip</div>\n      </Tooltip>\n    </div>\n  )\n})',
       height: '200',
     },
   ],
diff --git a/apps/web/src/routes/examples/[theme-rtl]/button/12-button-as-link/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/button/12-button-as-link/index@examples.tsx
index b3dda303..e8ca58dc 100644
--- a/apps/web/src/routes/examples/[theme-rtl]/button/12-button-as-link/index@examples.tsx
+++ b/apps/web/src/routes/examples/[theme-rtl]/button/12-button-as-link/index@examples.tsx
@@ -14,8 +14,8 @@ export default component$(() => {
       <Button href="https://google.com" target="_blank">
         Google.com
       </Button>
-      <Button href="/pages/getting-started">Quickstart</Button>
-      <Button href="/" tag={Link}>
+      <Button href="/examples/blue-ltr/button/11-button-disabled">Quickstart</Button>
+      <Button href="/examples/blue-ltr/button/13-button-full" tag={Link}>
         Internal link
       </Button>
     </div>
diff --git a/apps/web/src/routes/examples/[theme-rtl]/button/17-button-with-custom-tag/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/button/17-button-with-custom-tag/index@examples.tsx
new file mode 100644
index 00000000..b0dc3bf4
--- /dev/null
+++ b/apps/web/src/routes/examples/[theme-rtl]/button/17-button-with-custom-tag/index@examples.tsx
@@ -0,0 +1,22 @@
+/**
+ * title: Button with custom tag
+ * description: You can use a custom tag for the Button component.
+ */
+
+import { component$ } from '@builder.io/qwik'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+import { Button } from 'flowbite-qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+
+export default component$(() => {
+  return (
+    <div class="flex gap-2 items-center flex-wrap">
+      <Button tag="div">I'am a div</Button>
+      <Button tag="span">I'am a span</Button>
+    </div>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}
diff --git a/apps/web/src/routes/examples/[theme-rtl]/dropdown/06-dropdown-user-avatar/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/dropdown/06-dropdown-user-avatar/index@examples.tsx
index 765148c6..a3f99077 100644
--- a/apps/web/src/routes/examples/[theme-rtl]/dropdown/06-dropdown-user-avatar/index@examples.tsx
+++ b/apps/web/src/routes/examples/[theme-rtl]/dropdown/06-dropdown-user-avatar/index@examples.tsx
@@ -1,6 +1,6 @@
 /**
  * title: User avatar
- * description: This example can be used to show a list of menu items and options when a user is logged into your application.
+ * description:  You can use the `as` prop to set the trigger element to an image. The trigger passed as props should not be a button element as Dropdown use button element internally. This example can be used to show a list of menu items and options when a user is logged into your application.
  */
 
 import { component$ } from '@builder.io/qwik'
diff --git a/apps/web/src/routes/examples/[theme-rtl]/tooltip/01-default/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/tooltip/01-default/index@examples.tsx
index cf8e4611..a7acc29a 100644
--- a/apps/web/src/routes/examples/[theme-rtl]/tooltip/01-default/index@examples.tsx
+++ b/apps/web/src/routes/examples/[theme-rtl]/tooltip/01-default/index@examples.tsx
@@ -11,7 +11,10 @@ import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 export default component$(() => {
   return (
     <div class="flex text-center justify-center p-8">
-      <Tooltip style="dark" trigger={<Button>Hover me</Button>} content={<div>This is a tooltip</div>} />
+      <Tooltip style="dark">
+        <Button q:slot="trigger">Hover me</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
     </div>
   )
 })
diff --git a/apps/web/src/routes/examples/[theme-rtl]/tooltip/02-styles/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/tooltip/02-styles/index@examples.tsx
index e1f3089e..ef7e33d7 100644
--- a/apps/web/src/routes/examples/[theme-rtl]/tooltip/02-styles/index@examples.tsx
+++ b/apps/web/src/routes/examples/[theme-rtl]/tooltip/02-styles/index@examples.tsx
@@ -11,11 +11,18 @@ import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 export default component$(() => {
   return (
     <div class="flex text-center justify-center gap-3 p-8">
-      <Tooltip style="dark" trigger={<Button>Dark tooltip</Button>} content={<div>This is a tooltip</div>} />
-
-      <Tooltip style="light" trigger={<Button>Light tooltip</Button>} content={<div>This is a tooltip</div>} />
-
-      <Tooltip style="auto" trigger={<Button>Auto tooltip</Button>} content={<div>This is a tooltip</div>} />
+      <Tooltip style="dark">
+        <Button q:slot="trigger">Dark tooltip</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
+      <Tooltip style="light">
+        <Button q:slot="trigger">Light tooltip</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
+      <Tooltip style="auto">
+        <Button q:slot="trigger">Auto tooltip</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
     </div>
   )
 })
diff --git a/apps/web/src/routes/examples/[theme-rtl]/tooltip/03-placement/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/tooltip/03-placement/index@examples.tsx
index dba33f67..67bd2f06 100644
--- a/apps/web/src/routes/examples/[theme-rtl]/tooltip/03-placement/index@examples.tsx
+++ b/apps/web/src/routes/examples/[theme-rtl]/tooltip/03-placement/index@examples.tsx
@@ -11,13 +11,22 @@ import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 export default component$(() => {
   return (
     <div class="flex text-center justify-center gap-3 p-8">
-      <Tooltip placement="top" trigger={<Button>Tooltip top</Button>} content={<div>This is a tooltip</div>} />
-
-      <Tooltip placement="right" trigger={<Button>Tooltip right</Button>} content={<div>This is a tooltip</div>} />
-
-      <Tooltip placement="bottom" trigger={<Button>Tooltip bottom</Button>} content={<div>This is a tooltip</div>} />
-
-      <Tooltip placement="left" trigger={<Button>Tooltip left</Button>} content={<div>This is a tooltip</div>} />
+      <Tooltip placement="top">
+        <Button q:slot="trigger">Tooltip top</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
+      <Tooltip placement="right">
+        <Button q:slot="trigger">Tooltip right</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
+      <Tooltip placement="bottom">
+        <Button q:slot="trigger">Tooltip bottom</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
+      <Tooltip placement="left">
+        <Button q:slot="trigger">Tooltip left</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
     </div>
   )
 })
diff --git a/apps/web/src/routes/examples/[theme-rtl]/tooltip/04-trigger/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/tooltip/04-trigger/index@examples.tsx
index 49b999c4..6d371edc 100644
--- a/apps/web/src/routes/examples/[theme-rtl]/tooltip/04-trigger/index@examples.tsx
+++ b/apps/web/src/routes/examples/[theme-rtl]/tooltip/04-trigger/index@examples.tsx
@@ -11,9 +11,14 @@ import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 export default component$(() => {
   return (
     <div class="flex text-center justify-center gap-3 p-8">
-      <Tooltip triggerStrategy="hover" trigger={<Button>Tooltip hover</Button>} content={<div>This is a tooltip</div>} />
-
-      <Tooltip triggerStrategy="click" trigger={<Button>Tooltip click</Button>} content={<div>This is a tooltip</div>} />
+      <Tooltip trigger="hover">
+        <Button q:slot="trigger">Tooltip hover</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
+      <Tooltip trigger="click">
+        <Button q:slot="trigger">Tooltip click</Button>
+        <div q:slot="content">This is a tooltip</div>
+      </Tooltip>
     </div>
   )
 })
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 9f0b9ec5..48a0bd46 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -1,6 +1,6 @@
 import { component$ } from '@builder.io/qwik'
 import { DocFooter } from '~/components/Footer/Footer'
-import { Button, Heading, Jumbotron } from 'flowbite-qwik'
+import { Button, Card, Heading, Jumbotron } from 'flowbite-qwik'
 import { IconArrowRightOutline } from 'flowbite-qwik-icons'
 
 export default component$(() => {
@@ -43,12 +43,12 @@ export default component$(() => {
       </Jumbotron>
 
       <section class="flex-1">
-        <div class="grid p-6 grid-cols-2 md:grid-cols-4 gap-6 mt-8 mx-auto max-w-6xl">
-          {boxes.map((box, i) => (
-            <div key={i} class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
+        <div class="grid p-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-8 mx-auto max-w-6xl">
+          {boxes.map((box) => (
+            <Card>
               <Heading tag="h3">{box.title}</Heading>
               <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">{box.text}</p>
-            </div>
+            </Card>
           ))}
         </div>
       </section>
diff --git a/apps/web/src/routes/layout.tsx b/apps/web/src/routes/layout.tsx
index 1ec47bee..32ae8ec7 100644
--- a/apps/web/src/routes/layout.tsx
+++ b/apps/web/src/routes/layout.tsx
@@ -39,7 +39,7 @@ export default component$(() => {
           <Dropdown
             title="Switch Flowbite theme"
             as={
-              <Button square color="light" title="Switch Flowbite theme">
+              <Button square color="light" title="Switch Flowbite theme" tag="span">
                 <svg
                   class="w-4 h-4 text-gray-800 dark:text-white"
                   aria-hidden="true"
diff --git a/packages/lib/package.json b/packages/lib/package.json
index 80b43be0..6563622b 100644
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flowbite-qwik",
-  "version": "0.29.0",
+  "version": "0.29.1",
   "description": "Unofficial Qwik components built for Flowbite and Tailwind CSS",
   "keywords": [
     "design-system",
diff --git a/packages/lib/src/components/Button/Button.tsx b/packages/lib/src/components/Button/Button.tsx
index 99b1dedf..5c042785 100644
--- a/packages/lib/src/components/Button/Button.tsx
+++ b/packages/lib/src/components/Button/Button.tsx
@@ -3,7 +3,7 @@ import { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } f
 import { useButtonClasses } from '~/components/Button/composables/use-button-classes'
 import { useButtonSpinner } from '~/components/Button/composables/use-button-spinner'
 import { Spinner } from '~/components/Spinner/Spinner'
-import { LinkProps } from '@builder.io/qwik-city'
+import { Link, LinkProps } from '@builder.io/qwik-city'
 import type { IconProps } from 'flowbite-qwik-icons'
 
 export type ButtonProps = PropsOf<'button'> &
@@ -38,7 +38,7 @@ export const Button = component$<ButtonProps>(
     loadingPosition = 'prefix',
     disabled = false,
     href,
-    tag = 'a',
+    tag = 'button',
     prefix: Prefix,
     suffix: Suffix,
     full = false,
@@ -73,15 +73,17 @@ export const Button = component$<ButtonProps>(
       outline,
     })
 
-    const LinkComponent = tag !== 'a' ? tag : 'a'
-    const ButtonComponent = href ? LinkComponent : 'button'
+    const isLinkTag = ['a', Link].includes(tag)
+    const LinkComponent = isLinkTag ? tag : 'a'
+    const staticComponent = isLinkTag ? 'button' : tag
+    const ButtonComponent = href ? LinkComponent : staticComponent
 
     return (
       <ButtonComponent
         class={bindClasses.value}
-        href={ButtonComponent !== 'button' ? href : undefined}
-        target={ButtonComponent !== 'button' ? attrs.target : undefined}
-        //@ts-expect-error does not exist on link
+        href={href}
+        target={href ? attrs.target : undefined}
+        //@ts-expect-error does not exist on other elements
         disabled={ButtonComponent === 'button' ? disabled : undefined}
         onClick$={attrs.onClick$}
         {...attrs}
diff --git a/packages/lib/src/components/Dropdown/Dropdown.tsx b/packages/lib/src/components/Dropdown/Dropdown.tsx
index fb4b3981..33a25057 100644
--- a/packages/lib/src/components/Dropdown/Dropdown.tsx
+++ b/packages/lib/src/components/Dropdown/Dropdown.tsx
@@ -11,7 +11,6 @@ import {
   createElement,
   Fragment,
   Signal,
-  JSXNode,
 } from '@builder.io/qwik'
 import { getChild } from '~/utils/children-inspector'
 import { Button } from '~/components/Button/Button'
@@ -70,23 +69,6 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
     },
   ])
 
-  let triggerIsButton = false
-
-  getChild(Trigger, [
-    {
-      component: Button,
-      foundComponentCallback: () => {
-        triggerIsButton = true
-      },
-    },
-    {
-      component: 'button',
-      foundComponentCallback: () => {
-        triggerIsButton = true
-      },
-    },
-  ])
-
   return (
     <InnerDropdown
       components={components}
@@ -95,7 +77,6 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
       inline={inline}
       size={size}
       title={attrs.title}
-      triggerIsButton={triggerIsButton}
       trigger={Trigger}
     />
   )
@@ -123,11 +104,10 @@ type InnerDropdownProps = {
   inline: boolean
   size: DropdownSize
   title?: string
-  triggerIsButton?: boolean
   trigger?: JSXOutput
 }
 
-const InnerDropdown = component$<InnerDropdownProps>(({ label, trigger, triggerIsButton, title, closeWhenSelect, components, inline, size }) => {
+const InnerDropdown = component$<InnerDropdownProps>(({ label, trigger, title, closeWhenSelect, components, inline, size }) => {
   const { dropdownModalClasses } = useDropdownClasses(
     useComputed$(() => size),
     useComputed$(() => inline),
@@ -143,14 +123,7 @@ const InnerDropdown = component$<InnerDropdownProps>(({ label, trigger, triggerI
   return (
     <div class="block max-w-max relative">
       {TriggerButtonAs.value ? (
-        <TriggerButtonAs.value
-          ref={triggerRef}
-          size={size}
-          inline={inline}
-          visible={visible.value}
-          triggerIsButton={triggerIsButton}
-          trigger={trigger}
-        />
+        <TriggerButtonAs.value ref={triggerRef} size={size} inline={inline} visible={visible.value} trigger={trigger} />
       ) : (
         <TriggerButton.value ref={triggerRef} title={title} label={label} size={size} inline={inline} visible={visible.value} />
       )}
@@ -289,7 +262,7 @@ type InnerTriggerAsProps = {
 }
 type CompProps = Partial<PropsOf<'button'>>
 
-const InnerTriggerAs = component$<InnerTriggerAsProps>(({ size, trigger, triggerIsButton, ref, title, inline, visible }) => {
+const InnerTriggerAs = component$<InnerTriggerAsProps>(({ size, trigger, ref, title, inline, visible }) => {
   const { triggerInlineClasses } = useDropdownClasses(
     useComputed$(() => size),
     useComputed$(() => inline),
@@ -304,15 +277,8 @@ const InnerTriggerAs = component$<InnerTriggerAsProps>(({ size, trigger, trigger
     }
   })
 
-  ;(trigger as JSXNode).props.ref = ref
-  ;(trigger as JSXNode).props.title = title
-  ;(trigger as JSXNode).props['aria-expanded'] = visible
-  ;(trigger as JSXNode).props['aria-haspopup'] = 'menu'
-
-  return triggerIsButton ? (
-    <>{trigger}</>
-  ) : (
-    <button {...internalProps.value} class={triggerInlineClasses.value}>
+  return (
+    <button {...internalProps.value} class={trigger ? '' : triggerInlineClasses.value}>
       {trigger}
     </button>
   )
diff --git a/packages/lib/src/components/Floating/Floating.tsx b/packages/lib/src/components/Floating/Floating.tsx
index 0a119359..3996de8b 100644
--- a/packages/lib/src/components/Floating/Floating.tsx
+++ b/packages/lib/src/components/Floating/Floating.tsx
@@ -1,15 +1,4 @@
-import { JSXNode, JSXOutput, PropsOf, Signal, Slot, component$ } from '@builder.io/qwik'
-
-type RenderTriggerProps = PropsOf<'button'> & {
-  ref: Signal<HTMLElement | undefined>
-  triggerEl: JSXOutput
-}
-
-export const RenderFloatingTrigger = component$<RenderTriggerProps>((props) => {
-  ;(props.triggerEl as JSXNode).props.ref = props.ref
-
-  return <>{props.triggerEl}</>
-})
+import { PropsOf, Signal, Slot, component$ } from '@builder.io/qwik'
 
 type RenderFloatingElementProps = PropsOf<'div'> & {
   ref: Signal<HTMLDivElement | undefined>
diff --git a/packages/lib/src/components/Tooltip/Tooltip.tsx b/packages/lib/src/components/Tooltip/Tooltip.tsx
index 914c3e87..334aed6b 100644
--- a/packages/lib/src/components/Tooltip/Tooltip.tsx
+++ b/packages/lib/src/components/Tooltip/Tooltip.tsx
@@ -1,57 +1,55 @@
-import { JSXOutput, PropsOf, component$, useSignal } from '@builder.io/qwik'
+import { PropsOf, Slot, component$, useSignal } from '@builder.io/qwik'
 import { Placement } from '@floating-ui/dom'
 import { TooltipStyle } from './tooltip-types'
 import { FloatingTrigger } from '../Floating/floating-types'
-import { RenderFloatingArrow, RenderFloatingElement, RenderFloatingTrigger } from '../Floating/Floating'
+import { RenderFloatingArrow, RenderFloatingElement } from '../Floating/Floating'
 import { useFloating } from '~/composables/use-floating'
 
 type TooltipProps = PropsOf<'div'> & {
   placement?: Placement
   style?: TooltipStyle
-  triggerStrategy?: FloatingTrigger
+  trigger?: FloatingTrigger
   noArrow?: boolean
-  trigger?: JSXOutput
-  content?: JSXOutput
 }
 
-export const Tooltip = component$<TooltipProps>(
-  ({ placement = 'top', trigger, content, triggerStrategy = 'hover', style = 'auto', noArrow = false }) => {
-    const isVisible = useSignal(false)
-    const { floatingRef, arrowRef, triggerRef } = useFloating(placement, triggerStrategy, noArrow, isVisible)
+export const Tooltip = component$<TooltipProps>(({ placement = 'top', trigger = 'hover', style = 'auto', noArrow = false }) => {
+  const isVisible = useSignal(false)
+  const { floatingRef, arrowRef, triggerRef } = useFloating(placement, trigger, noArrow, isVisible)
 
-    return (
-      <>
-        <RenderFloatingTrigger ref={triggerRef} triggerEl={trigger} />
+  return (
+    <>
+      <div ref={triggerRef}>
+        <Slot name="trigger" />
+      </div>
 
-        <RenderFloatingElement
-          q:slot="floating"
-          ref={floatingRef}
-          isVisible={isVisible.value}
-          class={[
-            'inline-block px-3 py-2 text-sm font-medium transition-opacity duration-300 rounded-lg shadow-sm',
-            {
-              'bg-gray-900 text-white dark:bg-gray-700': style === 'dark',
-              'border border-gray-200 bg-white text-gray-900': style === 'light',
-              'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white': style === 'auto',
-            },
-          ]}
-        >
-          {content}
+      <RenderFloatingElement
+        q:slot="floating"
+        ref={floatingRef}
+        isVisible={isVisible.value}
+        class={[
+          'inline-block px-3 py-2 text-sm font-medium transition-opacity duration-300 rounded-lg shadow-sm',
+          {
+            'bg-gray-900 text-white dark:bg-gray-700': style === 'dark',
+            'border border-gray-200 bg-white text-gray-900': style === 'light',
+            'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white': style === 'auto',
+          },
+        ]}
+      >
+        <Slot name="content" />
 
-          {!noArrow && (
-            <RenderFloatingArrow
-              ref={arrowRef}
-              class={[
-                {
-                  'bg-gray-900 dark:bg-gray-700': style === 'dark',
-                  'bg-white': style === 'light',
-                  'bg-white dark:bg-gray-700': style === 'auto',
-                },
-              ]}
-            />
-          )}
-        </RenderFloatingElement>
-      </>
-    )
-  },
-)
+        {!noArrow && (
+          <RenderFloatingArrow
+            ref={arrowRef}
+            class={[
+              {
+                'bg-gray-900 dark:bg-gray-700': style === 'dark',
+                'bg-white': style === 'light',
+                'bg-white dark:bg-gray-700': style === 'auto',
+              },
+            ]}
+          />
+        )}
+      </RenderFloatingElement>
+    </>
+  )
+})