updates

src/lib/components/MobileNav.svelte

@@ -5,6 +5,7 @@
     import type { NavLink } from './MainNav.svelte';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
     import { Button, InlineTag, Icon } from '$lib/components/ui';
+    import { GithubStats } from '$lib/components/shared';
 
     export let open = false;
     export let links: NavLink[];
@@ -42,17 +43,7 @@
             </section>
         </div>
         <div class="web-side-nav-mobile-footer-buttons">
-            <Button
+            <GithubStats class="w-full! md:w-fit" />
-                href={SOCIAL_STATS.GITHUB.LINK}
-                target="_blank"
-                rel="noopener noreferrer"
-                variant="text"
-                class="w-full! md:w-fit"
-            >
-                <Icon icon="star" aria-hidden="true" />
-                Star on GitHub
-                <InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
-            </Button>
         </div>
     </div>
 </nav>

src/lib/components/shared/discord-link.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import { Icon, Button } from '$lib/components/ui';
+
+    type Props = {
+        class?: string;
+    };
+
+    const { class: className }: Props = $props();
+</script>
+
+<Button variant="secondary" class={className} href="https://appwrite.io/discord">
+    <Icon icon="discord" />
+    <span class="text">Join Discord</span>
+</Button>

src/lib/components/shared/github-stats.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { SOCIAL_STATS } from '$lib/constants';
+    import { Icon, InlineTag, Button } from '$lib/components/ui';
+
+    type Props = {
+        class?: string;
+    };
+
+    const { class: className }: Props = $props();
+</script>
+
+<Button
+    href={SOCIAL_STATS.GITHUB.LINK}
+    target="_blank"
+    rel="noopener noreferrer"
+    class={className}
+    variant="secondary"
+>
+    <Icon icon="star" aria-hidden="true" />
+    <span class="text">Star on GitHub</span>
+    <InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
+</Button>

src/lib/components/shared/index.ts

@@ -0,0 +1,3 @@
+export { default as GithubStats} from './github-stats.svelte';
+export { default as DiscordLink } from './discord-link.svelte';
+export { default as SocialStats} from './social-stats.svelte';

src/lib/components/ui/index.ts

@@ -1,4 +1,5 @@
 export { default as Button } from './button.svelte';
 export { default as InlineTag } from './inline-tag.svelte';
 export { default as Icon, type IconType } from './icon';
-export { default as Select } from './select.svelte';
+export { default as Select } from './select.svelte';
+export { default as SocialStats} from '../shared/social-stats.svelte'

src/lib/layouts/DocsTutorial.svelte

@@ -6,6 +6,8 @@
     import Heading from '$markdoc/nodes/Heading.svelte';
     import { onMount, tick } from 'svelte';
     import { page } from '$app/state';
+    import { Button, Icon } from '$lib/components/ui';
+    import { classNames } from '$lib/utils/classnames';
 
     export let toc: Array<TocItem>;
     export let back: string;
@@ -126,18 +128,18 @@
                 </ul>
                 <div class="u-cross-center relative flex">
                     {#if back}
-                        <a
+                        <Button
                             href={back}
-                            class="
+                            variant="text"
-						web-button is-text is-only-icon web-u-cross-center
+                            class="is-only-icon web-u-cross-center web-is-not-mobile -translate-x-1/2"
-						web-is-not-mobile -translate-x-1/2"
                             aria-label="previous page"
                         >
-                            <span
+                            <Icon
-                                class="icon-cheveron-left web-u-font-size-24 web-u-color-text-primary"
+                                icon="chevron-left"
+                                class="text-primary text-2xl"
                                 aria-hidden="true"
-                            ></span>
+                            />
-                        </a>
+                        </Button>
                     {/if}
                     <h1 class="web-title {currentStep === 1 ? 'lg:-ml-5' : ''}">
                         {firstStepItem?.title}
@@ -164,20 +166,26 @@
 
                     <div class="web-u-padding-block-start-32 flex justify-between">
                         {#if prevStep}
-                            <a href={prevStep.href} class="web-button is-text previous-step-anchor">
+                            <Button
-                                <span class="icon-cheveron-left" aria-hidden="true"></span>
+                                variant="text"
+                                href={prevStep.href}
+                                class="previous-step-anchor"
+                            >
+                                <Icon icon="chevron-left" aria-hidden="true" />
                                 <span class="web-sub-body-500">
                                     Step {prevStep.step}<span class="web-is-not-mobile"
                                         >: {getCorrectTitle(prevStep, 1)}</span
                                     >
                                 </span>
-                            </a>
+                            </Button>
                         {/if}
                         {#if nextStep}
-                            <a
+                            <Button
+                                variant="secondary"
                                 href={nextStep.href}
-                                class="web-button is-secondary"
+                                class={classNames({
-                                style:margin-left={prevStep ? undefined : 'auto'}
+                                    'ml-auto': prevStep
+                                })}
                             >
                                 <span class="web-sub-body-500">
                                     Step {nextStep.step}<span class="web-is-not-mobile"
@@ -185,7 +193,7 @@
                                     >
                                 </span>
                                 <span class="icon-cheveron-right" aria-hidden="true"></span>
-                            </a>
+                            </Button>
                         {/if}
                     </div>
                 </section>

src/lib/layouts/Main.svelte

@@ -20,6 +20,7 @@
     import MainNav from '$lib/components/MainNav.svelte';
     import { page } from '$app/state';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
+    import { Button, Icon, InlineTag } from '$lib/components/ui';
 
     export let omitMainId = false;
     let theme: 'light' | 'dark' | null = 'dark';
@@ -168,21 +169,21 @@
         </div>
         <div class="web-mobile-header-end">
             {#if !$isMobileNavOpen}
-                <a href={getAppwriteDashboardUrl()} class="web-button">
+                <Button href={getAppwriteDashboardUrl()}>
                     <span class="text">Start building</span>
-                </a>
+                </Button>
             {/if}
-            <button
+            <Button
-                class="web-button is-text"
+                variant="text"
                 aria-label="open navigation"
-                on:click={() => ($isMobileNavOpen = !$isMobileNavOpen)}
+                onclick={() => ($isMobileNavOpen = !$isMobileNavOpen)}
             >
                 {#if $isMobileNavOpen}
-                    <span aria-hidden="true" class="web-icon-close"></span>
+                    <Icon aria-hidden="true" icon="close" />
                 {:else}
-                    <span aria-hidden="true" class="web-icon-hamburger-menu"></span>
+                    <Icon aria-hidden="true" icon="hamburger-menu" />
                 {/if}
-            </button>
+            </Button>
         </div>
     </section>
     <header
@@ -228,21 +229,22 @@
                 <MainNav initialized={$initialized} links={navLinks} />
             </div>
             <div class="web-main-header-end">
-                <a
+                <Button
+                    variant="text"
                     href={SOCIAL_STATS.GITHUB.LINK}
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="web-button is-text web-u-inline-width-100-percent-mobile"
+                    class="web-u-inline-width-100-percent-mobile"
-                    on:click={() =>
+                    onclick={() =>
                         trackEvent({
                             plausible: { name: 'Star on GitHub in header' },
                             posthog: { name: 'github-stars_nav_click' }
                         })}
                 >
-                    <span class="web-icon-star" aria-hidden="true"></span>
+                    <Icon icon="star" aria-hidden="true" />
                     <span class="text">Star on GitHub</span>
-                    <span class="web-inline-tag text-sub-body">{SOCIAL_STATS.GITHUB.STAT}</span>
+                    <InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
-                </a>
+                </Button>
                 <IsLoggedIn />
             </div>
         </div>

src/lib/layouts/Sidebar.svelte

@@ -24,6 +24,7 @@
 <script lang="ts">
     import { clickOutside } from '$lib/actions/clickOutside';
     import { Tooltip, IsLoggedIn } from '$lib/components';
+    import { Button, Icon, InlineTag } from '$lib/components/ui';
     import { SOCIAL_STATS } from '$lib/constants';
     import { layoutState, toggleSidenav } from './Docs.svelte';
     import SidebarNavButton from './SidebarNavButton.svelte';
@@ -122,16 +123,17 @@
         <div class="web-side-nav-mobile-footer-buttons">
             <IsLoggedIn />
 
-            <a
+            <Button
+                variant="text"
                 href={SOCIAL_STATS.GITHUB.LINK}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="web-button is-text web-u-inline-width-100-percent-mobile"
+                class="web-u-inline-width-100-percent-mobile"
             >
-                <span class="web-icon-star" aria-hidden="true"></span>
+                <Icon class="star" aria-hidden="true"></Icon>
                 <span class="text">Star on GitHub</span>
-                <span class="web-inline-tag text-sub-body">{SOCIAL_STATS.GITHUB.STAT}</span>
+                <InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
-            </a>
+            </Button>
         </div>
     </div>
 </nav>

src/markdoc/layouts/Integration.svelte

@@ -7,6 +7,7 @@
     import type { Integration } from '$routes/integrations/+page';
     import { isHeaderHidden } from '$lib/layouts/Main.svelte';
     import { integrationCategoryDescriptions } from '$lib/constants';
+    import { Button, Icon } from '$lib/components/ui';
 
     export let title: Integration['title'];
     export let images: Integration['images'];
@@ -50,10 +51,10 @@
         <div class="dark container">
             <div class="web-integrations-top-section">
                 <div class="web-carousel-wrapper">
-                    <a href="/integrations" class="web-button is-text mb-12">
+                    <Button variant="text" href="/integrations" class="mb-12">
-                        <span class="icon-cheveron-left" aria-hidden="true"></span>
+                        <Icon icon="chevron-left" aria-hidden="true" />
                         <span>Back to catalog</span>
-                    </a>
+                    </Button>
 
                     {#if images.length > 1}
                         <Root>
@@ -168,12 +169,9 @@
                             Join our Technology Partners program to integrate your solutions with
                             Appwrite’s API, enhancing functionality and expanding your reach.
                         </p>
-                        <a
+                        <Button href="/integrations/technology-partner" class="mt-4 self-center">
-                            href="/integrations/technology-partner"
-                            class="web-button is-primary mt-4 self-center"
-                        >
                             <span class="text">Get Started</span>
-                        </a>
+                        </Button>
                     </section>
                 </div>
             </div>

src/markdoc/nodes/Image.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import Tooltip from '$lib/components/Tooltip.svelte';
+    import { Button, Icon } from '$lib/components/ui';
     import { createDialog, melt } from '@melt-ui/svelte';
     import { getContext, hasContext } from 'svelte';
     import { quadInOut } from 'svelte/easing';
@@ -44,9 +45,9 @@
         <img {src} {alt} {title} loading="lazy" class="aspect-video w-full" />
         <div class="abs">
             <Tooltip closeOnPointerDown>
-                <button class="web-button is-secondary cursor-pointer" use:melt={$trigger}>
+                <Button variant="secondary" class="cursor-pointer" action={trigger}>
                     <span class="icon-arrow-expand" aria-hidden="true"></span>
-                </button>
+                </Button>
                 {#snippet tooltip()}
                     Expand
                 {/snippet}

src/markdoc/tags/Call_To_Action.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
+    import { Button } from '$lib/components/ui';
     import { classNames } from '$lib/utils/classnames';
 
     interface Props {
@@ -52,6 +53,6 @@
         {/each}
     </ul>
     <div class="flex flex-col gap-2 md:flex-row">
-        <a href={url} class="web-button max-sm:w-full!">{cta}</a>
+        <Button href={url} class="max-sm:w-full!">{cta}</Button>
     </div>
 </div>

src/routes/+error.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { page } from '$app/state';
     import { FooterNav, MainFooter } from '$lib/components';
+    import { Button } from '$lib/components/ui';
     import { Main } from '$lib/layouts';
     import DocsError from './docs/+error.svelte';
 
@@ -28,7 +29,7 @@
                                 more of Appwrite's documentation.
                             </p>
                         {/if}
-                        <a href="/" class="web-button self-center">Back to homepage</a>
+                        <Button href="/" class="self-center">Back to homepage</Button>
                     </div>
                 </div>
             </div>

src/routes/assets/+page.svelte

@@ -86,10 +86,10 @@
                                 various platforms and materials.
                             </p>
 
-                            <a href="/assets.zip" download class="web-button">
+                            <Button href="/assets.zip" download>
-                                <span class="web-icon-download" aria-hidden="true"></span>
+                                <Icon icon="download" aria-hidden="true" />
                                 <span>Download assets</span>
-                            </a>
+                            </Button>
                         </section>
 
                         <section id={getSectionId(Section.NAMING)}>

src/routes/blog/[[page]]/+page.svelte

@@ -7,6 +7,7 @@
     import { createDebounce } from '$lib/utils/debounce';
     import { goto, onNavigate } from '$app/navigation';
     import { Article, FooterNav, MainFooter } from '$lib/components';
+    import { Button } from '$lib/components/ui';
 
     let { data } = $props();
 
@@ -238,9 +239,9 @@
                                         </div>
                                     </div>
                                 </div>
-                                <a href={featured.href} class="web-button is-secondary mt-auto">
+                                <Button variant="secondary" href={featured.href} class="mt-auto">
                                     <span>Read article</span>
-                                </a>
+                                </Button>
                             </div>
                         </article>
                     {/if}
@@ -344,15 +345,15 @@
                                     No results found for "{query ? query : selectedCategory}"
                                 </p>
 
-                                <button
+                                <Button
-                                    class="web-button is-secondary"
+                                    variant="secondary"
                                     onclick={() => {
                                         query = '';
                                         selectedCategory = 'Latest';
                                         handleSearch();
                                     }}
                                     >Clear search
-                                </button>
+                                </Button>
                             </div>
                         {/each}
                     </ul>

src/routes/changelog/[[page]]/+page.svelte

@@ -8,6 +8,7 @@
     import { page } from '$app/state';
     import { CHANGELOG_KEY } from '../utils';
     import { TITLE_SUFFIX } from '$routes/titles';
+    import { Button } from '$lib/components/ui';
 
     let { data } = $props();
 
@@ -62,7 +63,10 @@
                     </ul>
 
                     {#if data.nextPage}
-                        <button class="web-button is-secondary" onclick={loadMore}>Load more</button
+                        <Button
+                            class="mx-auto mt-20 min-w-44"
+                            variant="secondary"
+                            onclick={loadMore}>Load more</Button
                         >
                     {/if}
                 </div>
@@ -127,12 +131,6 @@
         }
     }
 
-    button {
-        margin-block-start: 5rem;
-        margin-inline: auto;
-        min-inline-size: 10.9375rem;
-    }
-
     @media screen and (max-width: 512px) {
         ul {
             padding-inline-start: 0;

src/routes/community/+page.svelte

@@ -56,6 +56,8 @@
     import ProjectCard from './ProjectCard.svelte';
 
     import { SOCIAL_STATS } from '$lib/constants';
+    import { Button, Icon } from '$lib/components/ui';
+    import InlineTag from '$lib/components/ui/inline-tag.svelte';
 
     let { data } = $props();
 
@@ -167,26 +169,25 @@
                                 worldwide.
                             </p>
                             <div class="mt-8 flex flex-wrap gap-3">
-                                <a
+                                <Button
                                     href={SOCIAL_STATS.DISCORD.LINK}
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                    class="web-button is-full-width-mobile"
+                                    class="is-full-width-mobile"
                                 >
                                     <span class="text">Join our Discord</span>
-                                </a>
+                                </Button>
-                                <a
+                                <Button
+                                    variant="secondary"
                                     href={SOCIAL_STATS.GITHUB.LINK}
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                    class="web-button is-secondary is-full-width-mobile"
+                                    class="is-full-width-mobile"
                                 >
-                                    <span aria-hidden="true" class="web-icon-star"></span>
+                                    <Icon icon="star" aria-hidden="true" />
                                     <span>Star on GitHub</span>
-                                    <span class="web-inline-tag text-sub-body"
+                                    <InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
-                                        >{SOCIAL_STATS.GITHUB.STAT}</span
+                                </Button>
-                                    >
-                                </a>
                             </div>
                         </div>
                     </div>

src/routes/products/functions/(components)/OpenSource.svelte

@@ -5,6 +5,7 @@
     import collaboration from '../(assets)/collaboration.svg';
     import customization from '../(assets)/customization.svg';
     import transparency from '../(assets)/transparency.svg';
+    import { GithubStats, DiscordLink } from '$lib/components/shared';
 
     const items = [
         {
@@ -66,23 +67,8 @@
             <div
                 class="mx-auto mt-2 flex w-full flex-col items-center justify-center gap-2 md:flex-row"
             >
-                <a
+                <GithubStats class="h-10 !w-full md:!w-fit" />
-                    href={SOCIAL_STATS.GITHUB.LINK}
+                <DiscordLink class="h-10 !w-full md:!w-fit" />
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="web-button is-secondary h-10 !w-full md:!w-fit"
-                >
-                    <span class="web-icon-star" aria-hidden="true"></span>
-                    <span class="text">Star on GitHub</span>
-                    <span class="web-inline-tag text-sub-body">{SOCIAL_STATS.GITHUB.STAT}</span>
-                </a>
-                <a
-                    class="web-button is-secondary h-10 !w-full md:!w-fit"
-                    href="https://appwrite.io/discord"
-                >
-                    <span class="web-icon-discord"></span>
-                    <span class="text">Join Discord</span>
-                </a>
             </div>
         </div>
 

src/routes/products/functions/(components)/Templates.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import Tooltip from '$lib/components/Tooltip.svelte';
+    import { Button } from '$lib/components/ui';
     import { classNames } from '$lib/utils/classnames';
     import Templates from '../(assets)/templates.png';
 
@@ -72,9 +73,10 @@
     <div class="container mt-20 space-y-8">
         <div class="flex items-center justify-between">
             <h2 class="text-label text-primary font-aeonik-pro">Explore templates</h2>
-            <a
+            <Button
+                variant="secondary"
                 href="/docs/products/functions/templates"
-                class="web-button is-secondary !hidden md:!block">View all templates</a
+                class="!hidden md:!block">View all templates</Button
             >
         </div>
         <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
@@ -119,10 +121,10 @@
                 </div>
             {/each}
 
-            <a
+            <Button
+                variant="secondary"
                 href="/docs/products/functions/templates"
-                class="web-button is-secondary block !w-full md:!hidden md:!w-fit"
+                class="block !w-full md:!hidden md:!w-fit">View all templates</Button
-                >View all templates</a
             >
         </div>
     </div>

src/routes/products/messaging/(components)/Schedule.svelte

@@ -2,6 +2,7 @@
     import { getLocalTimeZone, today } from '@internationalized/date';
     import { createCalendar, melt } from '@melt-ui/svelte';
     import Step from './Step.svelte';
+    import { Button } from '$lib/components/ui';
 
     const curr = today(getLocalTimeZone());
 
@@ -29,13 +30,13 @@
                     <div class="text-label text-primary" use:melt={$heading}>
                         {$headingValue}
                     </div>
-                    <button
+                    <Button
-                        class="web-button is-secondary"
+                        variant="secondary"
-                        on:click={() => value.set(curr)}
+                        onclick={() => value.set(curr)}
                         style="height: min-content; padding-block: 0 !important;"
                     >
                         Today
-                    </button>
+                    </Button>
                 </div>
                 <button class="web-icon-button" use:melt={$nextButton}>
                     <div class="web-icon-chevron-right"></div>

src/routes/products/messaging/(components)/Target.svelte

@@ -10,6 +10,7 @@
     import { onMount } from 'svelte';
     import { inView } from 'motion';
     import { sleep } from '$lib/animations';
+    import { Button } from '$lib/components/ui';
 
     /* Variables & Contstants */
     const width = 2000;
@@ -361,7 +362,7 @@
                 <span style="font-size: 14px; color: #6C6C71;"
                     >{users.filter((u) => !!u.devices.some((d) => d.checked)).length} Users selected</span
                 >
-                <button class="web-button">Add</button>
+                <Button>Add</Button>
             </div>
         </div>
     </div>

src/routes/products/messaging/+page.svelte

@@ -10,6 +10,7 @@
     import MultiCodeContextless from '$lib/components/MultiCodeContextless.svelte';
     import { Platform } from '$lib/utils/references';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
+    import { Button } from '$lib/components/ui';
 
     const title = 'Messaging' + TITLE_SUFFIX;
     const description =
@@ -269,9 +270,9 @@ messaging.create_email(
                         directly to your users.
                     </p>
                     <div class="hero-buttons mt-8 flex items-center gap-2">
-                        <a class="web-button" href={getAppwriteDashboardUrl()}>Get started</a>
+                        <Button href={getAppwriteDashboardUrl()}>Get started</Button>
-                        <a class="web-button is-secondary" href="/docs/products/messaging"
+                        <Button variant="secondary" href="/docs/products/messaging"
-                            >Documentation</a
+                            >Documentation</Button
                         >
                     </div>
                 </div>

src/routes/products/storage/(components)/OpenSource.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { Button } from '$lib/components/ui';
     import { classNames } from '$lib/utils/classnames';
 
     const items = [
@@ -28,14 +29,15 @@
                 Appwrite is a 100% open source project, giving you the flexibility and support you
                 need to get your project started.
             </p>
-            <a
+            <Button
+                variant="secondary"
                 href="/"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="web-button is-secondary mx-auto mt-4 !w-full md:!w-fit"
+                class="mx-auto mt-4 !w-full md:!w-fit"
             >
                 <span>Join the community</span>
-            </a>
+            </Button>
         </div>
     </div>
 </div>

src/routes/products/storage/(components)/Optimized.svelte

@@ -1,3 +1,7 @@
+<script>
+    import { Button } from '$lib/components/ui';
+</script>
+
 <section class="container grid grid-cols-1 place-items-center gap-16 pt-12 md:grid-cols-2 md:pt-20">
     <div class="hidden md:block">
         <img src="/images/pages/storage/product-shot-3.png" width="687" alt="" />
@@ -9,12 +13,13 @@
             optimized upload times.
         </p>
         <div class="mt-8 flex gap-2">
-            <a
+            <Button
+                variant="secondary"
                 href="/docs/products/storage/images"
-                class="web-button is-secondary !w-full md:!w-fit"
+                class="!w-full md:!w-fit"
             >
                 <span class="text">Learn more</span>
-            </a>
+            </Button>
         </div>
     </div>
     <div class="block md:hidden">

src/routes/products/storage/(components)/Permissions.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { Button } from '$lib/components/ui';
     import ProductShot from './ProductShot.svelte';
 </script>
 
@@ -13,9 +14,10 @@
             <p class="text-body max-width-[380px] mx-auto font-medium">
                 Set up file encryption and granular user permissions in your storage infrastructure
             </p>
-            <a
+            <Button
                 href="/docs/products/storage/permissions"
-                class="web-button is-secondary mx-auto mt-4 !w-full md:!w-fit">Learn more</a
+                variant="secondary"
+                class="mx-auto mt-4 !w-full md:!w-fit">Learn more</Button
             >
         </div>
     </div>

src/routes/products/storage/(components)/PreviewFiles.svelte

@@ -3,6 +3,7 @@
 
     import ProductPreview from '../(assets)/product-preview.png';
     import { Platform } from '$lib/utils/references';
+    import { Button } from '$lib/components/ui';
 
     const snippet = [
         {
@@ -35,12 +36,13 @@
                 managing different formats and compression algorithms.
             </p>
             <div class="mt-8 flex gap-2">
-                <a
+                <Button
+                    variant="secondary"
                     href="/docs/products/storage/upload-download#get-file-preview"
-                    class="web-button is-secondary !w-full md:!w-fit"
+                    class="!w-full md:!w-fit"
                 >
                     <span class="text">Learn more</span>
-                </a>
+                </Button>
             </div>
         </div>
         <div class="relative">

src/routes/products/storage/+page.svelte

@@ -15,6 +15,7 @@
     import HeroImage from './(assets)/hero-image.png';
     import ProductCards from '$lib/components/product-pages/product-cards.svelte';
     import Optimized from './(components)/Optimized.svelte';
+    import { Button } from '$lib/components/ui';
 
     const title = 'Storage' + TITLE_SUFFIX;
     const description =
@@ -83,14 +84,15 @@
                             Organize your buckets and files with ease in your dashboard, as well as
                             manage security, permissions, compression, and more.
                         </p>
-                        <a
+                        <Button
+                            variant="secondary"
                             href="/docs/products/storage/buckets"
                             target="_blank"
                             rel="noopener noreferrer"
-                            class="web-button is-secondary mx-auto mt-4 !w-full md:!w-fit"
+                            class="mx-auto mt-4 !w-full md:!w-fit"
                         >
                             <span>Learn more</span>
-                        </a>
+                        </Button>
                     </div>
                 </div>
             </div>
@@ -169,14 +171,14 @@
                                 Appwrite's Storage APIs allow you to create and update your files,
                                 apply image transformations, and more.
                             </p>
-                            <a
+                            <Button
                                 href="/docs/references/cloud/client-web/storage"
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                class="web-button mt-4 !w-full md:!w-fit"
+                                class="mt-4 !w-full md:!w-fit"
                             >
                                 <span>View docs</span>
-                            </a>
+                            </Button>
                         </div>
                         <WhatYouCanDo />
                     </div>

src/routes/products/storage/EventCard.svelte

@@ -15,6 +15,8 @@
 </script>
 
 <script lang="ts">
+    import { Button } from '$lib/components/ui';
+
     type $$Props = EventCardProps;
 
     export let href: $$Props['href'];
@@ -53,9 +55,9 @@
             {description}
         </p>
         <div class="u-flex u-flex-wrap u-gap-8 u-padding-block-start-16 mbs-auto">
-            <button class="web-button is-secondary">
+            <Button variant="secondary">
                 <span>{buttonText}</span>
-            </button>
+            </Button>
         </div>
     </div>
 </a>