Replace component CTA with Button with new props

src/components/widgets/Header.astro

@@ -3,9 +3,11 @@ import { Icon } from "astro-icon/components";
 import Logo from "~/components/Logo.astro";
 import ToggleTheme from "~/components/common/ToggleTheme.astro";
 import ToggleMenu from "~/components/common/ToggleMenu.astro";
+import Button from "~/components/ui/Button.astro"
 
 import { getHomePermalink } from "~/utils/permalinks";
 import { trimSlash, getAsset } from "~/utils/permalinks";
+import type { CallToAction } from "~/types";
 
 interface Link {
   text?: string;
@@ -14,10 +16,7 @@ interface Link {
   icon?: string;
 }
 
-interface ActionLink extends Link {
-  class?: string;
-  type?: string;
-}
+interface ActionLink extends CallToAction {}
 
 interface MenuLink extends Link {
   links?: Array<MenuLink>;
@@ -146,10 +145,8 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
         {
           actions?.length ? (
             <span class="ml-4 rtl:ml-0 rtl:mr-4">
-              {actions.map(({ text, href, class: className }) => (
-                <a class:list={["btn ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm", className]} href={href}>
-                  <Fragment set:html={text} />
-                </a>
+              {actions.map((btnProps) => (
+                <Button {...btnProps} class="ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto"/>
               ))}
             </span>
           ) : (