Button Component

A versatile button component with multiple variants, sizes, and states for consistent user interactions.

Overview

The Button component is a fundamental UI element that provides consistent styling and behavior across the application. It supports multiple variants, sizes, and states to accommodate different use cases.

Usage

Basic Import

---
import Button from '../ui/atoms/Button.astro';
---

<Button>Click me</Button>

With Props

<Button 
  variant="primary" 
  size="lg" 
  href="/contact"
  target="_blank"
>
  Get in Touch
</Button>

Variants

Primary

Used for main actions and call-to-action buttons.

Secondary

Used for secondary actions and alternative options.

Outline

Used for subtle actions that need less visual weight.

Ghost

Used for minimal actions and navigation elements.

Sizes

Props

Prop Type Default Description
variant string "primary" Button style variant: "primary", "secondary", "outline", "ghost"
size string "md" Button size: "sm", "md", "lg"
href string undefined If provided, renders as a link instead of button
target string undefined Link target attribute (only when href is provided)
type string "button" Button type: "button", "submit", "reset"
disabled boolean false Disables the button
class string undefined Additional CSS classes

Examples

Call to Action

<Button variant="primary" size="lg">Get Started</Button>
<Button variant="outline" size="lg">Learn More</Button>

Navigation Links

View Projects Contact Me 
<Button href="/projects" variant="ghost">View Projects</Button>
<Button href="/contact" variant="secondary">Contact Me</Button>

Form Actions

<Button type="submit" variant="primary">Submit Form</Button>
<Button type="reset" variant="outline">Reset</Button>

Best Practices

Do

  • Use primary variant for main actions
  • Use descriptive button text that clearly indicates the action
  • Maintain consistent sizing within the same context
  • Use appropriate variants based on visual hierarchy

Don't

  • Use multiple primary buttons in the same section
  • Use vague text like "Click here" or "Submit"
  • Mix different sizes randomly without purpose
  • Override core styling that breaks accessibility