astro-buttons

v0.0.1

A collection of beautifully designed, standalone UI kit button components for Astro

_ _signor_p_ · 0 downloads · Updated 7/24/2026
astrobuttonsui-kitcomponentsrecipe
xnex install astro-buttons GitHub repo

⚡ Astro Buttons UI Kit Recipe

Astro Zero Dependencies TypeScript Ready UI Kit

Premium, standalone, zero-dependency button components designed specifically for Astro projects. Copy directly into your codebase, customize visually via props, and keep your global CSS completely clean.

🌟 Why Use This Recipe?

Building buttons sounds simple until your design demands Glassmorphism, Cyberpunk Neon Glows, Interactive Ripples, or 3D Neo-Brutalist shadows—and suddenly you spend hours writing custom CSS or wrestling with heavy UI framework dependencies.

This recipe eliminates that friction for Astro developers:

  • 🧩 Zero Node Modules Bloat: Components live directly inside your project under src/components/buttons/. You own the code.
  • 🎨 Zero-CSS Customization: Want custom colors or rounded corners? Don't open CSS files! Pass bg="#8b5cf6" or radius="full" as props and let the component bind variables under the hood.
  • 🛡️ Zero Global CSS Side-Effects: Every button uses Astro-scoped styles (<style>). Pick 1 variant or all 8—they will never clash with each other or your global stylesheets.
  • ⚡ Smart Polymorphism: Pass an href prop and the component seamlessly morphs from a <button> into a fully accessible <a> tag.
  • ⏳ Built-In Micro-Interactions: Hover light reflections, click ripples, loading spinners, and pulse effects work out of the box with zero runtime libraries.

📦 What's Inside?

Choose any combination of variants depending on your project's aesthetic:

VariantComponent FileVisual Vibe
Basicbasic.button.astroClean, versatile UI baseline with Primary, Secondary, Ghost, Outline, Danger, and Success presets.
Glassglass.button.astroModern glassmorphism with backdrop blur and dynamic light-sheen reflection on hover.
Neonneon.button.astroCyberpunk sci-fi glowing borders with optional pulsing energy animations.
Gradientgradient.button.astroVibrant animated mesh gradients with smooth shimmer wave overlays.
Retroretro.button.astroNeo-Brutalist 3D tactile button with bold offset hard box-shadows.
Rippleripple.button.astroMaterial-style expanding wave effect triggered on click coordinates.
Glowglow.button.astroSaaS-inspired rotating border-beam aura glow for high-converting CTA sections.
Minimalminimal.button.astroUltra-sleek soft pills, bordered lines, and subtle underline hover highlights.

🚀 Quick Start

1. Basic Usage

Import the button variant you selected in your recipe:

astro 
---
import GlassButton from '../components/buttons/glass.button.astro';
import NeonButton from '../components/buttons/neon.button.astro';
---

<GlassButton variant="frosted" size="lg">
  Explore Features
</GlassButton>

<NeonButton variant="cyan" pulsing={true}>
  Launch System
</NeonButton>

2. Customizing Without Writing CSS

Change background colors, text tones, or border radius straight from Astro props:

astro 
---
import GradientButton from '../components/buttons/gradient.button.astro';
import RetroButton from '../components/buttons/retro.button.astro';
---

<!-- Custom purple gradient with full pill radius -->
<GradientButton bg="linear-gradient(135deg, #a855f7, #ec4899)" radius="full">
  Custom Purple
</GradientButton>

<!-- Custom emerald retro button with dark green 3D shadow -->
<RetroButton bg="#10b981" textColor="#000000" shadowColor="#064e3b" radius="md">
  Custom Retro
</RetroButton>

3. Loading States & Icon Slots

All variants support built-in loading spinners and icon slots:

astro 
---
import BasicButton from '../components/buttons/basic.button.astro';
---

<!-- Loading Spinner State -->
<BasicButton variant="primary" isLoading={true} loadingText="Saving changes..." />

<!-- Icon Slot Integration -->
<BasicButton variant="primary">
  <svg slot="icon-left" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
  Continue
</BasicButton>

🛠️ Common Props API

All 8 button variants implement the same predictable API:

PropTypeDefaultDescription
variantstringVariant-specificPreset visual style variant.
size'sm' | 'md' | 'lg' | 'xl''md'Button padding and typography scale.
radius'none' | 'sm' | 'md' | 'lg' | 'full''md'Corner border radius.
bgstringundefinedCustom background color or CSS gradient (Zero-CSS override).
textColorstringundefinedCustom text color.
borderColorstringundefinedCustom border color.
isFullWidthbooleanfalseStretches button width to 100% of container.
isLoadingbooleanfalseDisplays animated spinner and disables interaction.
loadingTextstringundefinedOptional text shown next to the spinner.
disabledbooleanfalseDisables clicks and applies muted styles.
hrefstringundefinedAutomatically renders an <a> anchor element if set.
targetstringundefinedAnchor target attribute (e.g. _blank).
type'button' | 'submit' | 'reset''button'Button type attribute.

💡 Developer Experience

When you download this recipe, your chosen variants land straight inside src/components/buttons/. There are no black-box abstractions, no complex configuration files, and no unexpected global CSS overrides.

It's your code, clean, fast, and ready for production. Happy building! 🚀

You might also be interested in these

Recipe Package

astro-cards

v0.0.1

A collection of beautifully designed, standalone UI kit card components for Astro

astrocardsui-kit
_ _signor_p_
1
Recipe Package

nestjs-basic-auth

v0.0.3

NESTJS BASIC AUTH RECIPE

nestjsnexauth
_ _signor_p_
1
Recipe Package

nestjs

v0.0.1

NESTJS EMPTY TEMPLATE

nestjsnexbackend
_ _signor_p_
1
Recipe Package

nestjs-logging

v0.0.1

NESTJS REQUEST LOGGING MIDDLEWARE RECIPE

nexnestjslogging
_ _signor_p_
1
Recipe Package

fastapi-exceptions

v0.0.1

Global exception handling module and demo error endpoints for FastAPI recipes.

fastapiexceptionserror-handling
_ _signor_p_
0