_Button

Props

Source apps/www/src/sections/_Button.astro @ gitt.one

---
interface Props {
  href: string;
  kind?: 'primary' | 'secondary' | 'link';
  onDark?: boolean;
}
const { href, kind = 'primary', onDark = false } = Astro.props;
const cls = {
  primary:
    'inline-flex items-center justify-center rounded-md bg-gradient-to-r from-primary-600 to-primary-alt-700 px-5 py-3 text-base font-medium text-white shadow-sm hover:from-primary-700 hover:to-primary-alt-800',
  secondary: onDark
    ? 'inline-flex items-center justify-center rounded-md bg-white/10 px-5 py-3 text-base font-medium text-white ring-1 ring-white/30 hover:bg-white/20'
    : 'inline-flex items-center justify-center rounded-md bg-primary-50 px-5 py-3 text-base font-medium text-primary-800 hover:bg-primary-100',
  link: onDark
    ? 'font-medium text-primary-200 hover:text-white'
    : 'font-medium text-primary-700 hover:text-primary-600',
}[kind];
---

<a href={href} class={cls}><slot />{kind === 'link' && <span aria-hidden="true"> &rarr;</span>}</a>