DeCentN2Madness
e51f2133ef
- add reusable Link and Button MDX components - convert source-verified page CTAs to explicit buttons - match live-site prose link styling and CTA destinations - document link, button, and extraction authoring rules
71 lines
1.4 KiB
Plaintext
71 lines
1.4 KiB
Plaintext
---
|
|
interface Props {
|
|
href: string;
|
|
variant?: 'filled' | 'outlined' | 'light';
|
|
size?: 'default' | 'small';
|
|
target?: '_blank' | '_self';
|
|
rel?: string;
|
|
class?: string;
|
|
}
|
|
|
|
const {
|
|
href,
|
|
variant = 'filled',
|
|
size = 'default',
|
|
target,
|
|
rel = target === '_blank' ? 'noopener noreferrer' : undefined,
|
|
class: className
|
|
} = Astro.props;
|
|
---
|
|
|
|
<a
|
|
class:list={['content-button', `content-button--${variant}`, { 'content-button--small': size === 'small' }, className]}
|
|
href={href}
|
|
target={target}
|
|
rel={rel}
|
|
>
|
|
<slot />
|
|
</a>
|
|
|
|
<style>
|
|
.content-button {
|
|
background: var(--color-accent);
|
|
border: 2px solid var(--color-accent);
|
|
border-radius: 4px;
|
|
color: var(--color-primary);
|
|
display: inline-block;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
padding: .8rem 1.2rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.content-button:hover,
|
|
.content-button:focus-visible {
|
|
background: transparent;
|
|
border-color: var(--color-accent-strong);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.content-button--outlined {
|
|
background: transparent;
|
|
}
|
|
|
|
.content-button--outlined:hover,
|
|
.content-button--outlined:focus-visible {
|
|
background: rgb(37 64 128 / 4%);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.content-button--light {
|
|
background: white;
|
|
border-color: white;
|
|
color: var(--color-primary-dark);
|
|
}
|
|
|
|
.content-button--small {
|
|
font-size: .9rem;
|
|
padding: .5rem 1rem;
|
|
}
|
|
</style>
|