diff --git a/src/lib/components/ui/button/Button.svelte b/src/lib/components/ui/button/Button.svelte
new file mode 100644
index 0000000..368ea9d
--- /dev/null
+++ b/src/lib/components/ui/button/Button.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { Button as BitsButton, type WithoutChildren } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { COLOR_MAP, VARIANT_MAP, SIZE_MAP } from './button.variants';
+  import type { Color, Variant, Size } from './button.variants';
+
+  type Props = WithoutChildren<BitsButton.RootProps> & {
+    color?: Color;
+    variant?: Variant;
+    size?: Size;
+    wide?: boolean;
+    block?: boolean;
+    square?: boolean;
+    circle?: boolean;
+
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    color,
+    variant,
+    size,
+    wide,
+    block,
+    square,
+    circle,
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const classes = $derived(
+    [
+      'btn',
+      color && COLOR_MAP[color],
+      variant && VARIANT_MAP[variant],
+      size && SIZE_MAP[size],
+      wide && 'btn-wide',
+      block && 'btn-block',
+      square && 'btn-square',
+      circle && 'btn-circle',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<BitsButton.Root class={classes.trim()} {...restProps}>
+  {@render children?.()}
+</BitsButton.Root>
diff --git a/src/lib/components/ui/button/button.variants.ts b/src/lib/components/ui/button/button.variants.ts
new file mode 100644
index 0000000..7640694
--- /dev/null
+++ b/src/lib/components/ui/button/button.variants.ts
@@ -0,0 +1,30 @@
+export const COLOR_MAP = {
+  neutral: 'btn-neutral',
+  primary: 'btn-primary',
+  secondary: 'btn-secondary',
+  accent: 'btn-accent',
+  info: 'btn-info',
+  success: 'btn-success',
+  warning: 'btn-warning',
+  error: 'btn-error',
+} as const;
+
+export const VARIANT_MAP = {
+  outline: 'btn-outline',
+  dash: 'btn-dash',
+  soft: 'btn-soft',
+  ghost: 'btn-ghost',
+  link: 'btn-link',
+} as const;
+
+export const SIZE_MAP = {
+  xs: 'btn-xs',
+  sm: 'btn-sm',
+  md: 'btn-md',
+  lg: 'btn-lg',
+  xl: 'btn-xl',
+} as const;
+
+export type Color = keyof typeof COLOR_MAP;
+export type Variant = keyof typeof VARIANT_MAP;
+export type Size = keyof typeof SIZE_MAP;
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000..ae34e39
--- /dev/null
+++ b/src/lib/components/ui/button/index.ts
@@ -0,0 +1 @@
+export { default as Button } from './Button.svelte';