57 lines
1.3 KiB
Plaintext
57 lines
1.3 KiB
Plaintext
---
|
|
type Variant = 'primary' | 'secondary' | 'ghost' | 'inverse';
|
|
type Size = 'sm' | 'md' | 'lg';
|
|
|
|
interface Props {
|
|
variant?: Variant;
|
|
size?: Size;
|
|
href?: string;
|
|
type?: 'button' | 'submit' | 'reset';
|
|
class?: string;
|
|
ariaLabel?: string;
|
|
disabled?: boolean;
|
|
id?: string;
|
|
}
|
|
|
|
const {
|
|
variant = 'primary',
|
|
size = 'md',
|
|
href,
|
|
type = 'button',
|
|
class: className = '',
|
|
ariaLabel,
|
|
disabled,
|
|
id,
|
|
} = Astro.props;
|
|
|
|
const base =
|
|
'inline-flex items-center justify-center gap-2 font-label-md rounded-md transition-all duration-200 select-none disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98]';
|
|
|
|
const sizes: Record = {
|
|
sm: 'h-9 px-4 text-[13px]',
|
|
md: 'h-10 px-5 text-sm',
|
|
lg: 'h-12 px-7 text-label-md',
|
|
};
|
|
|
|
const variants: Record = {
|
|
primary: 'bg-primary text-white hover:brightness-110',
|
|
secondary: 'bg-white text-on-surface border border-border-subtle hover:border-primary',
|
|
ghost: 'text-primary hover:bg-primary/5',
|
|
inverse: 'bg-inverse-surface text-white hover:bg-primary',
|
|
};
|
|
|
|
const cls = [base, sizes[size], variants[variant], className].filter(Boolean).join(' ');
|
|
---
|
|
|
|
{
|
|
href ? (
|
|
<a href={href} class={cls} aria-label={ariaLabel} id={id}>
|
|
<slot />
|
|
</a>
|
|
) : (
|
|
<button type={type} class={cls} aria-label={ariaLabel} disabled={disabled} id={id}>
|
|
<slot />
|
|
</button>
|
|
)
|
|
}
|