www/src/components/Button.astro

---
import { getLocale, getPath } from '~/utils/i18n'

const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
const {
  class: className,
  isPrimary,
  isAlert,
  isBordered,
  href,
  id,
  extra,
  localePath = true,
  ...props
} = Astro.props
---

{
  href ? (
    <a
      id={id}
      {...extra}
      href={localePath ? getLocalePath(href) : href}
      class:list={[
        'transition-bg flex items-center justify-center gap-2 rounded-xl px-6 py-4 transition-transform duration-150 hover:scale-[1.02] active:scale-[0.98]',
        className,
        isPrimary
          ? 'border-dark bg-dark text-paper shadow-lg'
          : isAlert
            ? 'bg-red-300 text-dark'
            : !isBordered
              ? 'bg-subtle'
              : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
      ]}
      {...props}
    >
      <slot />
    </a>
  ) : (
    <button
      id={id}
      {...extra}
      class:list={[
        'transition-bg flex items-center justify-center gap-2 rounded-lg px-6 py-3 transition-transform duration-150 hover:scale-[1.02]',
        className,
        isPrimary
          ? 'border-dark bg-dark text-paper shadow-md'
          : isAlert
            ? 'bg-red-300 text-dark'
            : !isBordered
              ? ''
              : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
      ]}
      {...props}
    >
      <slot />
    </button>
  )
}
<style>
  button,
  a {
    font-size: 0.9rem;

    &[disabled] {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
</style>