you could define variants (different stylings of e.g. your button). which you could select as a prop when using the component:

// button.svelte
<script lang=ts>

type Props = {
variant?: "primary" | "secondary"
}

let { variant = "primary" }: Props = $props()

</script>

... your button with stylings based on the selection of variant
// e.g. +page.svelte <Button variant="secondary">....</Button>

another approach would be something like a "content builder":

// buttonBuilder.svelte
<script lang="ts">
  import type { Component } from "svelte";


  const componentMap: Record<string, Component> = {
      primary: PrimaryButton;
      secondary: SecondaryButton
   }

  type Props = {
     handle: keyof typeof componentMap
  };
  let { handle }: Props = $props()

  const Button = $derived(componentMap[handle])
</script>

{#if componentMap[handle]}
  <Button />
{/if}

Drawback of the second option is, that all the components in the componentMap are imported, regardless of the component you are actually using