Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/DavidEspinozaRomero/Proyecto-de-vivienda-social-renacer/llms.txt

Use this file to discover all available pages before exploring further.

​
Button Components

Proyecto Renacer includes two button components for different UI contexts: the standard Button.astro for primary actions and ButtonTransparent.astro for overlay contexts.

​
Button.astro

The main button component with multiple style variants and configurable border radius.

​
Props

​
type
string
required
The button style variant. Available options:
  • primary - Primary brand color (default)
  • secondary - Secondary brand color
  • dark - Dark slate background
  • light - White background with primary border
  • whatsapp - Emerald green for WhatsApp
  • facebook - White with primary border for Facebook
​
link
string
URL destination for the button. Wraps the button in an anchor tag.
​
rounded
string
default:"lg"
Border radius style. Options:
  • plain - Minimal rounding
  • lg - Large rounded corners (default)
  • full - Very rounded corners
  • pill - Full pill shape

​
Usage Examples

Primary action button (from index.astro:37-40) 
<Button type="primary" link="/proyecto">
  Solicita información
  <span class="material-symbols-outlined">arrow_forward</span>
</Button>
Light variant for secondary actions (from index.astro:41-43) 
<Button type="light" link="/requisitos">
  Conoce los requisitos
</Button>
WhatsApp contact button with pill shape (from index.astro:421-428) 
<Button
  type="whatsapp"
  rounded="full"
  link="https://wa.me/593999730617"
>
  <span class="material-symbols-outlined">chat</span>
  Contáctanos por WhatsApp
</Button>
Dark button for emphasis (from index.astro:347-349) 
<Button type="dark" link="/requisitos">
  Ver requisitos para inscripción
</Button>
Pill-shaped light button (from proyecto.astro:280-283) 
<Button type="light" rounded="pill" link="/contacto">
  <span class="material-symbols-outlined">calendar_month</span>
  Agenda una reunión
</Button>

​
Styling Details

The Button component includes built-in interactions:
  • Hover scale effect (hover:scale-105)
  • Smooth transitions
  • Consistent padding (px-8 py-4)
  • Bold text at text-lg size
  • Flexbox layout for icon alignment
Source location: /workspace/source/src/components/Button.astro:1-34

​
ButtonTransparent.astro

A glassmorphic button designed for use on hero sections or image overlays.

​
Props

​
link
string
URL destination for the button.

​
Features

  • Semi-transparent white background (bg-white/10)
  • Backdrop blur effect for glassmorphism
  • White border with transparency
  • White text color for contrast on dark backgrounds
  • Hover state with increased opacity

​
Usage Example

<ButtonTransparent link="/contacto">
  Learn More
</ButtonTransparent>

​
Styling Details

rounded-lg py-6 px-3
bg-white/10 backdrop-blur-md
border border-white/20
text-white text-base font-bold
hover:bg-white/20 transition-all
Source location: /workspace/source/src/components/ButtonTransparent.astro:1-16

​
Best Practices

  1. Use the right variant: Choose type based on visual hierarchy:
    • primary for main CTAs
    • light for secondary actions
    • whatsapp or facebook for social integrations
    • dark for emphasis on light backgrounds
  2. Include icons thoughtfully: Material Symbols icons work well when placed inside button content: 
    <Button type="primary">
  <span class="material-symbols-outlined">arrow_forward</span>
  Continue
</Button>
  3. Consider context: Use ButtonTransparent only on dark backgrounds or images where the glassmorphic effect is visible.
  4. Rounded styles: Use rounded="pill" or rounded="full" for more modern, friendly CTAs in hero sections.

Build docs developers (and LLMs) love

Get started for freeTalk to us