Skip to main content
The ButtonCta.astro component renders a styled anchor tag with an email icon and custom label. It’s designed to be used as a call-to-action button for contact links.

​
Props

​
link
string
required
The URL or link destination for the button
​
label
string
required
The text label displayed on the button

​
Usage

Import and use the ButtonCta component with the required props: 
---
import ButtonCta from '../components/ButtonCta.astro';
---

<ButtonCta 
    link="mailto:[email protected]" 
    label="Contáctame" 
/>

​
Example

Create a contact button: 
---
import ButtonCta from '../components/ButtonCta.astro';
---

<section class="contact">
    <h2>Get in touch</h2>
    <ButtonCta 
        link="mailto:[email protected]" 
        label="Send Email" 
    />
</section>

​
Features

  • Icon: Includes a built-in email envelope icon (SVG)
  • Styling: Uses primary brand color background with light text
  • Alignment: Aligns to flex-start by default
  • Spacing: Gap between icon and label for clean layout

​
Styling Details

The component includes:
  • Background: var(--color-primary)
  • Text color: var(--color-light)
  • Border radius: var(--border-radius)
  • Padding: 0.5rem 1rem
  • Icon size: 1.5rem × 1.5rem
  • Font weight: 300 for light appearance

​
Customization

While the component currently uses a fixed email icon, you could enhance it to accept different icon types: 
interface Props {
    link: string;
    label: string;
    iconType?: 'email' | 'phone' | 'web';
}

Build docs developers (and LLMs) love

Get started for freeTalk to us