_Button

Props

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

---
/**
 * _Button — the shared button of the library: "primary" the solid brand
 *   gradient, "secondary" a pale or translucent one, "link" an arrow link.
 *   Sections render it from their primaryText/secondaryText/linkText props;
 *   content never uses it directly.
 */
interface Props {
  href: string;
  kind?: 'primary' | 'secondary' | 'link';
  /** the secondary and link kinds turn white on a dark background */
  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>